[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
看關(guān)鍵的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;//滾動(dòng)間隔時(shí)間,單位秒
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
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);
});
實(shí)現(xiàn)思路與以前的文字滾動(dòng)是一樣的，都是先充滿當(dāng)前容器，再通過(guò)scrollTop++往上滾的，只不過(guò)他是每次滾動(dòng)的距離不是固定的，是取當(dāng)前滾動(dòng)消息的高度。由于scrollTop（滾出當(dāng)前可視區(qū)域的高度）和offsetTop（距離父節(jié)點(diǎn)頂部的距離，常用于取某元素在頁(yè)面的坐標(biāo)位置）的區(qū)別，所以通過(guò) if(this.lis[this.d].offsetTop <= this.box.scrollTop)來(lái)判斷是否滾動(dòng)完上條消息，需要停頓下了。 我覺(jué)得亮點(diǎn)之處在于$的寫(xiě)法。通常Prototype里也就取下obj||document.getElementById('objId')，他這里除此外還幫obj綁定了一些方法。他的作用是不是類(lèi)似于原型擴(kuò)展String、Array等對(duì)象的方法呢。這個(gè)可以借鑒。
另外，他初始化時(shí)填充容器時(shí)用document.createElement->賦innerHTML->appendChild來(lái)做，我覺(jué)的不如直接cloneNode(true)->appendChild好，如不對(duì)，歡迎指正。
主要還是填下這個(gè)月的坑，哈哈。
聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
