Tencent_javascript スキルによる高さが固定されていないメッセージのスクロール効果

<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> <a target="_blank">刘伟其实这场还行，只是手感不好，如果那两个投篮进了肯定又有特多人说他是好控位了，而且还会说是救了中国，所以不要总怪刘伟，还是因为中国整体实力和希腊比不了，不过这场打的挺好了，这么打下去我相信中国会出线的 </a></p></div> <div class="con"><p> 鄙视那些自以为了不起的人，同样是中国人，你那么凶不去世锦赛上牛比？ </p></div> </div> </div> </td> </tr> </table> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute

]

Look at the key js code:

Copy code

The code is as follows:

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;/ /Scroll interval time, unit second
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;ivar __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);
});

The implementation idea is the same as the previous text scrolling, which is to fill the current container first. Then scroll up through scrollTop, but the distance of each scroll is not fixed, it is the height of the current scroll message. Due to the difference between scrollTop (the height of scrolling out of the current visible area) and offsetTop (the distance from the top of the parent node, often used to obtain the coordinate position of an element on the page), through if(this.lis[this.d].offsetTop <= this.box.scrollTop) to determine whether the last message has been scrolled and needs to be paused.

I think the highlight is the way $ is written. Usually obj||document.getElementById('objId') is removed from Prototype. In addition, he also binds some methods to obj. Is its role similar to the prototype's method of extending String, Array and other objects? This can be learned from.
In addition, when filling the container during initialization, use document.createElement->assign innerHTML->appendChild to do it. I think it is not as good as directly cloneNode(true)->appendChild. If it is wrong, please correct me.
The main thing is to fill in the gaps this month, haha.