当前位置：首页 > 资讯 > 技术文档

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

时间：2020-02-02 02:10 编辑：来源：阅读：
扫一扫，手机访问

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

<div> 
<table align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border:1px solid black;" width="320"> 
<tr> 
<td valign="top"> 
<div class="Contentnr auto"> 
 
<div id="msg_weibo"> 
<div class="con"> 
世锦赛第一场，打得还不错，希望不是昙花一现，要战，便战至消亡！

</div> 
<div class="con"> 
对刘伟真的无语了关键时刻不是失误就是浪投，男篮要想取得比赛的胜利后卫线上必须得加强防守和减少失误

</div> 
<div class="con"> 
男篮，加油

</div> 
<div class="con">昨天竞彩网让分胜负是希腊让中国20分！…中国打得不错！死了一大片彩民

</div> 
<div class="con"> 
有希望

</div> 
<div class="con"> 
晚上的比赛将是男篮在这届世锦赛的首胜。加油

</div> 
<div class="con"> 
今晚的中国男篮让我刮目相看了，也完全出乎我的意料！积极主动、神勇自信、信赖队友、坚持自己的打法、不慌张，这简直是一支梦幻的国家队，如果个人技术能再好一点，还真有世界强队的样子。能跟前欧洲冠军希腊队打成这样，真的很佩服，不得不竖大拇哥。易建联、王治郅，个个好样的！
 
</div> 
<div class="con"> 
[url=http://www.1sucai.cn/article/23421.htm]如需引入外部Js需刷新才能执行[/url]]</div>
看关键的js code：
<div class="codetitle"><span><a class="copybut" data="472" id="copybut472" onclick="doCopy('code472')" style="CURSOR: pointer">[u]复制代码[/u]</a></span> 代码如下:</div><div class="codebody" id="code472">
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);
});
</div>
实现思路与以前的文字滚动是一样的，都是先充满当前容器，再通过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好，如不对，欢迎指正。

主要还是填下这个月的坑，哈哈。</div>
  
 
  <a name="pj"></a>
 <div class="pinlun fontyh">
  <ul class="plu1">
  <li class="l1"><strong>全部评论</strong>(0)</li><li class="l2"></li>
  </ul>
  <form name="f1" method="post" target="_blank" onSubmit="return newspj()">
  <input type="hidden" value="142372" name="bh" />
  <ul class="plu0">
  <li class="l1"><textarea id="pjt" name="pjt">

[展开所有评论]

上一篇：JavaScript Uploadify文件上传实例
下一篇：Query中click(),bind(),live(),delegate()的区别

资讯排行榜
更多>>

联系客服

客服电话：
400-000-3129

微信版

扫一扫进微信版

返回顶部