来自腾讯的一个不固定高度得消息的滚动特效
时间:2024-04-17 10:19:34
<div> <table width="320" cellpadding="0" cellspacing="0" align="left" style="border-collapse:collapse;border:1px solid black;"> <tr> <td valign="top"> <div class="Contentnr auto"> <style> #msg_weibo {width:300px;height:186px;*height:186px;_height:170px;margin:10px auto 0;zoom:1; overflow:hidden;font-size:12px;line-height:20px;margin-bottom:4px;background:#ffffff;} #msg_weibo a{margin-right:6px;color:#003C71;text-decoration:none;} #msg_weibo a:hover{color:#c00;text-decoration:underline;} #msg_weibo img{margin-top:2px;} #msg_weibo span{color: #888;} #msg_weibo div{padding:8px 0 11px 0 ;overflow:hidden;zoom:1;background:url(/upload/201009/20100901004427526.gif) left bottom repeat-x} #msg_weibo span a{display:block;} #msg_weibo img{float:left;width:50px; height:50px; padding:2px; border:#D6D6D6 1px solid;} #msg_weibo p{float:left;width:295px; padding-left:5px; } </style> <div id="msg_weibo"> <div class="con"><p> 世锦赛第一场,打得还不错,希望不是昙花一现,要战,便战至消亡! </p></div> <div class="con"><p> 对刘伟真的无语了关键时刻不是失误就是浪投,男篮要想取得比赛的胜利后卫线上必须得加强防守和减少失误 </p></div> <div class="con"><p> 男篮,加油 </p></div> <div class="con"><p>昨天竞彩网让分胜负是希腊让中国20分!…中国打得不错!死了一大片彩民 </p></div> <div class="con"><p> 有希望 </p></div> <div class="con"><p> 晚上的比赛将是男篮在这届世锦赛的首胜。加油 </p></div> <div class="con"><p> 今晚的中国男篮让我刮目相看了,也完全出乎我的意料!积极主动、神勇自信、信赖队友、坚持自己的打法、不慌张,这简直是一支梦幻的国家队,如果个人技术能再好一点,还真有世界强队的样子。能跟前欧洲冠军希腊队打成这样,真的很佩服,不得不竖大拇哥。易建联、王治郅,个个好样的!</p> </div> <div class="con"><p> 刘伟其实这场还行,只是手感不好,如果那两个投篮进了肯定又有特多人说他是好控位了,而且还会说是救了中国,所以不要总怪刘伟,还是因为中国整体实力和希腊比不了,不过这场打的挺好了,这么打下去我相信中国会出线的 </p></div> <div class="con"><p> 鄙视那些自以为了不起的人,同样是中国人,你那么凶不去世锦赛上牛比? </p></div> </div> </div> </td> </tr> </table> <script language="javascript"> 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); }); </script> </div>
看关键的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好,如不对,欢迎指正。
主要还是填下这个月的坑,哈哈。
标签:不固定高度,消息
0
投稿
猜你喜欢
使用Python和GDAL给图片加坐标系的实现思路(坐标投影转换)
2021-11-10 03:15:31
微信小程序中显示倒计时代码实例
2024-04-23 09:32:22
H1标签的定义
2008-07-29 12:43:00
Laravel中使用阿里云OSS Composer包分享
2023-11-04 23:31:23
thinkphp3.x连接mysql数据库的方法(具体操作步骤)
2023-11-22 20:04:41
网站导航设计的6大分类
2010-07-12 18:46:00
MySQL5.7 JSON类型使用详解
2024-01-15 23:57:04
用Python实现斐波那契(Fibonacci)函数
2023-06-29 19:59:07
基于numpy中的expand_dims函数用法
2023-02-25 23:24:20
Python实现绘制多种激活函数曲线详解
2022-06-30 01:02:06
golang 输出重定向:fmt Log,子进程Log,第三方库logrus的详解
2024-04-27 15:40:14
使用AJAX的一个简单的例子
2007-09-21 17:55:00
深入浅出Golang中的sync.Pool
2024-02-11 12:59:34
使用pyqt5 实现ComboBox的鼠标点击触发事件
2022-01-12 17:24:57
conn.execute(sql)后面加(0)和不加的区别
2009-06-24 11:13:00
Python实现一行代码自动绘制艺术画
2021-03-26 00:32:54
Python实现url长短链接的转换
2022-07-21 14:05:58
golang的强制类型转换实现
2024-01-31 03:29:38
Python封装数据库连接池详解
2024-01-14 06:26:37
Python使用googletrans报错的解决方法
2021-09-21 01:38:00