来自腾讯的一个不固定高度得消息的滚动特效
发布时间: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
投稿
猜你喜欢
- 将Django与其他现有认证系统的用户名和密码或者认证方法进行整合是可以办到的。例如,你所在的公司也许已经安装了LDAP,并且为每一个员工都
- 如下所示:import timedef date_compare(item1, item2): t1 = time.mktime(time.
- Python字符串拼接的几种方法整理第一种 通过加号(+)的形式print('第一种方式通过加号形式连接 :' + '
- 很多人不明白,学习这些冷门的函数基本上都用不到,或者说是什么多大用处,事实上,有是有很多用处的,比如今天给大家介绍的uuid模块,就能够生成
- 在Python中一切都是对象。Python中对象包含的三个基本要素,分别是:id(身份标识)、type(数据类型)和value(值)。对象之
- 我在前几天的博客中翻译了一篇《20个对学习CSS3大有裨益的资源》的文章,其中推荐了Get started with CSS 3,本文为其中
- 本文整理了Pytorch框架下模型的保存、复用、推理、再训练和迁移等实现。模型的保存与复用模型定义和参数打印# 定义模型结构class Le
- 一、块(Block)是PL/SQL的基本执行单元,由定义部分,执行部分(必须)和例外处理部分组成。Declare/*定义部分――定义常量、变
- PHP页面中如果不希望出现以下情况: 单引号被转义为 \' 双引号被转义为 \" 那么可以进行如下设置以防止: 方法一:在
- 现在主流的cms或者blog等系统中,都内置的有插件系统,但是层层深入、剖析实现的方式,其实都是最简单的钩子的复杂化的实现。前言钩子是插件执
- 取余函数 PHP取余函数 PHP两个取余 MOD(x,y) x%yMOD例如:9/3,9是被除数,3为除数.mod函数是一个求余函数,其格式
- 整数在Python中,整数(integer)是一种内置数据类型,用于表示整数值。Python中的整数类型可以表示任意大小的整数,而不需要考虑
- 工作中,经常会有用python访问各种数据库的需求,比如从oracle读点配置文件或者往mysql写点结果信息之类的。这里列一下可能用到的各
- 一、语法while 条件:执行代码while就是当的意思,它指当其后面的条件成立,就执行while下面的代码。例:写一个从0打印到10的程序
- 卷积函数python提供了多种卷积方案,相比之下,定义在ndimage中的卷积函数,在功能上比numpy和signal中的卷积要稍微复杂一些
- 前言本文主要给大家介绍了关于Django中内置用户认证的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。认证登陆在
- 1.创建多线程类全局变量 secclass work_thread(QThread): timer = pyqtSignal() # 每隔一
- IE8 的测试版发布,ACID 3 测试正式推出,听上去是让人兴奋的技术进步,而对中文互联网站却是极大的威胁:这意味着,超过半数的中文网页在
- jQuery 真是一个非常伟大的 javascript library,至少在我不会写 JS 的时候第一时间接触了它,虽然还有其他很多优秀的
- 前言 获得图像的关键点后,可通过计算得到关键点的描述符。关键点描述符可用于图像的特征匹配。通常,在计算图A是否包含图B的特