当前位置:主页 > 网页特效 > 页面特效 > 内容欢迎大家投稿

仿腾讯的消息框滚动特效

时间:2010-09-18 22:43来源:互联网 作者:大宝库 点击:读取中
提示:您可以先修改部分代码再运行,复制代码和保存代码功能在Firefox下无效。

 

        

 

实现思路
与以前的文字滚动是一样的,都是先充满当前容器,再通过scrollTop++往上滚的,只不过他是每次滚动的距离不是固定的,是取当前滚动消息的高度。由于scrollTop(滚出当前可视区域的高度)和offsetTop(距离父节点顶部的距离,常用于取某元素在页面的坐标位置)的区别,所以通过 if(this.lis[this.d].offsetTop <= this.box.scrollTop)来判断是否滚动完上条消息,需要停顿下了。

我觉得亮点之处在于$的写法。通常Prototype里也就取下obj||document.getElementById('objId'),他这里除此外还帮obj绑定了一些方法。他的作用是不是类似于原型扩展String、Array等对象的方法呢。这个可以借鉴。
另外,他初始化时填充容器时用document.createElement->赋innerHTML->appendChild来做,我觉的不如直接cloneNode(true)->appendChild好,如不对,欢迎指正。
 



(责任编辑:大宝库)


------分隔线----------------------------
推荐内容
赞助商链接
赞助商链接