在我们做项目的时候 有很多页面要我们来设计
设计完成之后我们还要给它们设定相对应的功能 这就导致了我们做项目时常都要考虑的一个问题 那就是各类页面的交互问题我们应该怎么解决
这个是我们最常见也是最常用的方法
用Jquery方法 window;location.replace 是利用本地重定向来跳转页面页面跳转之后不可逆
window.opener是window.open打开的子页面调用父页面对象 window.opener只是对弹出窗口的母窗口的一个引用
比如:A页面中 通过点击按钮等方式window.open出一个新的窗口B页面 那么在B页面中 就可以通过window.opener来引用A页面 包括A页面的document等对象,操作A页面的内容
window.parent 是iframe页面调用父页面对象
parent表示父窗口 比如一个A页面利用iframe或frame调用B页面
那么A页面所在窗口就是B页面的parent
通过这个方法就能够实现子页面和父页面的交互
window指代的是当前页面 例如对于此例它指的是top.html页面
parent指的是当前页面的父页面 也就是包含它的框架页面 例如对于此例它指的是frame.html
frames是window对象
是一个数组 代表着该框架内所有子页面
如果想关闭窗口时刷新或者想开窗时刷新的话 在中调用以下语句即可
开窗时刷新
关闭时刷新
现在前端页面能够实现的交互效果越来越酷炫,也越来越复杂。但是这些特效背后的形成机制,却始终简洁优雅。
简单说来,一个交互效果的实现,是由HTML提供页面骨架,JavaScript负责行为事件,而页面中呈现出的各种各样的效果,是由CSS完成的。当然,每一个特效形成的具体原理各有不同,不过也是有规律可寻。
显示与隐藏
典型代表: 下拉菜单 提示框
利用CSS的display属性,在事件发生后实现相应区块内容的显示和隐藏显示和隐藏。 需要注意的是,在具体实现中,最好不要在JS代码直接写style.display,而是通过改变相应内容的className去实现,这样就把JS与CSS很好的进行了分离。这种显示和隐藏,根据不同的情况还存在很多的变体,opactiy(蒙版) 、overflow(图片轮播)。
数值改变
典型代表: 顶部广告 图片轮播
页面中很多元素的CSS属性都是数值型的,结合setInterval() setTimeout()等方法,可以让CSS属性值动态的改变,从而实现一些简单的动画效果。不过对于一些复杂的动画效果,最好是用CSS3去实现,呈现出来会更细腻流畅。
相互关联
典型代表: 网页定位导航 放大镜
页面中各元素不是孤立存在的,它们之间也是有许多的联系。,网页定位导航的实现,就是利用了页面内容与导航条间的联系, 放大镜效果,是通过建立鼠标位置的移动与放大展示图片的联系。
当然这里效果总结只是总体的很小一部分,而且随着CSS3、HTML5等新特性被浏览器的逐渐支持,会有更多新奇好玩的效果出现。等有机会了,再进行总结。