ホームページ > 記事 > ウェブフロントエンド > Tencent_javascript スキルによる高さが固定されていないメッセージのスクロール効果
Tencent_javascript スキルによる高さが固定されていないメッセージのスクロール効果
- WBOYオリジナル
- 2016-05-16 18:20:37920ブラウズ
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute
Look at the key js 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;i
__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.
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。