右下角弹框的实现

[| 2010/05/19 00:44]
今天想做个在右下角弹框的功能。

首先找了一些成品。发现居然都不能随着页面的滚动而移动。

解决方法:
一,使用window.scroll事件动态调整位置。缺点:快速滚动页面时明显抖动。故不用。
二,css中position:fixed。但顾及IE6的兼容性,需加:
* html #winpop {position: absolute; top: expression(offsetParent.scrollTop+document.documentElement.clientHeight-this.offsetHeight); }

其中* html规则只对IE有效。

我采用了方法二。完美。

准备设计成如下动作:打开页面时,框自下而上移动上来,停留一段时间,隐藏到只剩标题。鼠标移上,挪出;鼠标离开,隐藏。

刚开始就是很简单的的设计,检测到onMouseOver 就调用挪出函数,检测到onMouseOut就调用隐藏函数。挪出函数(show)和隐藏函数(hide)都用setInterval来实现渐渐移出/隐藏的动态效果。达到移动效果后使用clearInterval结束循环。但是很快发现框发生了颤抖,陷入死循环。

去网上查了下资料,发现JavaScript是单线程运行的,所有系统事件触发的回调函数都放到消息队列中依次执行。这样的话在框上升过程中鼠标移开,那么show和hide同时运行,各自不停的向消息队列插入挪出和隐藏消息。结果框始终不能完全隐藏或完全挪出。于是不停上下颤动。陷入死循环。

解决方法:调用hide函数时首先使用clearInterval结束一下show函数的循环,同理,调用show函数时也结束hide函数的循环。这样就不会产生两循环同时运行的结果了。



总结:JavaScript使用单线程模型固然省去了很多同步互斥问题,但是也影响了其实时性,消息队列的使用使函数从被调用到真正运行存在一定延迟,导致设置同样的延时,不同浏览器上实际延迟时间不同,给用户的体验也不同。Chrome中框的运动速度要明显快于IE8。
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]