来自腾讯的一个不固定高度得消息的滚动特效

 更新时间:2010年09月01日 00:44:29   作者:  
8月最后1天,赶紧补篇博客。贴个最近看到的腾讯的特效,写的还可以。先看效果。

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

看关键的js code:
复制代码 代码如下:

var $ = function (d){
typeof d == "string" &&(d = document.getElementById(d));
return $.fn.call(d);
};
$.fn = function (){
this.addEvent = function (sEventType,fnHandler){
if (this.addEventListener) {this.addEventListener(sEventType, fnHandler, false);}
else if (this.attachEvent) {this.attachEvent("on" + sEventType, fnHandler);}
else {this["on" + sEventType] = fnHandler;}
}
this.removeEvent = function (sEventType,fnHandler){
if (this.removeEventListener) {this.removeEventListener(sEventType, fnHandler, false);}
else if (this.detachEvent) {this.detachEvent("on" + sEventType, fnHandler);}
else { this["on" + sEventType] = null;}
}
return this;
};
var Class = {create: function() {return function() { this.initialize.apply(this, arguments); }}};
var Bind = function (obj,fun,arr){return function() {return fun.apply(obj,arr);}}
var Marquee = Class.create();
Marquee.prototype = {
initialize: function(id,name,out,speed) {
this.name = name;
this.box = $(id);
this.out = 3;//滚动间隔时间,单位秒
this.speed = speed;
this.d = 1;
this.box.style.position = "relative";
this.box.scrollTop = 0;
var _li = this.box.firstChild;
while(typeof(_li.tagName)=="undefined")_li = _li.nextSibling;
this.lis = this.box.getElementsByTagName(_li.tagName);
this.len = this.lis.length;
for(var i=0;i<this.lis.length;i++){
var __li = document.createElement(_li.tagName);
__li.innerHTML = this.lis[i].innerHTML;
this.box.appendChild(__li);//cloneNode
if(this.lis[i].offsetTop>=this.box.offsetHeight)break;
}
this.Start();
this.box.addEvent("mouseover",Bind(this,function(){clearTimeout(this.timeout);},[]));
this.box.addEvent("mouseout",Bind(this,this.Start,[]));
},
Start:function (){
clearTimeout(this.timeout);
this.timeout = setTimeout(this.name+".Up()",this.out*1000)
},
Up:function(){
clearInterval(this.interval);
this.interval = setInterval(this.name+".Fun()",10);
},
Fun:function (){
this.box.scrollTop+=this.speed;
if(this.lis[this.d].offsetTop <= this.box.scrollTop){
clearInterval(this.interval);
this.box.scrollTop = this.lis[this.d].offsetTop;
this.Start();
this.d++;
}
if(this.d >= this.len + 1){
this.d = 1;
this.box.scrollTop = 0;
}
}
};
$(window).addEvent("load",function (){
marquee = new Marquee("msg_weibo","marquee",1,2);
});

实现思路与以前的文字滚动是一样的,都是先充满当前容器,再通过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好,如不对,欢迎指正。

主要还是填下这个月的坑,哈哈。

相关文章

  • Bootstrap4一次重大更新 几乎涉及每行代码

    Bootstrap4一次重大更新 几乎涉及每行代码

    Bootstrap 4是一次重大更新,几乎涉及每行代码,这篇文章为大家分享了Bootstrap 4.0重大更新及亮点详细解读,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JS HTML5拖拽上传图片预览

    JS HTML5拖拽上传图片预览

    这篇文章主要为大家详细介绍了JS HTML5拖拽上传图片预览的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-07-07
  • 微信小程序实现星级评价

    微信小程序实现星级评价

    这篇文章主要为大家详细介绍了微信小程序实现星级评价,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 移动端效果之IndexList详解

    移动端效果之IndexList详解

    这篇文章主要为大家详细介绍了移动端效果之IndexList,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解Bootstrap创建表单的三种格式(一)

    详解Bootstrap创建表单的三种格式(一)

    在本章中,我们将学习如何使用 Bootstrap 创建表单。Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单,对bootstrap 表单相关知识感兴趣的朋友一起学习吧
    2016-01-01
  • js中通过getElementsByName访问name集合对象的方法

    js中通过getElementsByName访问name集合对象的方法

    下面小编就为大家带来一篇js中通过getElementsByName访问name集合对象的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • js相册效果代码(点击创建即可)

    js相册效果代码(点击创建即可)

    利用js 书写的相册代码,点击创建即可看到效果,感兴趣的朋友可以参考下哈,希望对你学习jquery有所帮助
    2013-04-04
  • SublimeText自带格式化代码功能之reindent

    SublimeText自带格式化代码功能之reindent

    这篇文章主要介绍了SublimeText自带格式化代码功能之reindent的相关资料,需要的朋友可以参考下
    2015-12-12
  • JavaScript之Getters和Setters 平台支持等详细介绍

    JavaScript之Getters和Setters 平台支持等详细介绍

    现在,JavaScript的Getters和Setters使用非常广泛,它和每个JavaScript开发者的切身利益息息相关,我们先来快速了解什么是Getters和Setters,以及它们为什么很有用.然后,我们来看看现在都有哪些平台支持Gettets和Setters
    2012-12-12
  • javascript 按回车键相应按钮提交事件

    javascript 按回车键相应按钮提交事件

    在表单提交前经常遇到表单验证问题而常用的方法有以下两种.
    2009-11-11

最新评论