核心代碼:
複製代碼 代碼如下:<script type="text/javascript">
function Marquee() {
this.ID = document.getElementById(arguments[0]);
this.Direction = arguments[1];
this.Step = arguments[2];
this.Width = arguments[3];
this.Height = arguments[4];
this.Timer = arguments[5];
this.WaitTime = arguments[6];
this.StopTime = arguments[7];
if (arguments[8]) { this.ScrollStep = arguments[8]; } else { this.ScrollStep = this.Direction > 1 ? this.Width : this.Height; }
this.CTL = this.StartID = this.Stop = this.MouseOver = 0;
this.ID.style.overflowX = this.ID.style.overflowY = "hidden";
this.ID.noWrap = true;
this.ID.style.width = this.Width;
this.ID.style.height = this.Height;
this.ClientScroll = this.Direction > 1 ? this.ID.scrollWidth : this.ID.scrollHeight;
this.ID.innerHTML += this.ID.innerHTML;
this.Start(this, this.Timer, this.WaitTime, this.StopTime);
}
Marquee.prototype.Start = function(msobj, timer, waittime, stoptime) {
msobj.StartID = function() { msobj.Scroll(); }
msobj.Continue = function() {
if (msobj.MouseOver == 1) { setTimeout(msobj.Continue, waittime); }
else { clearInterval(msobj.TimerID); msobj.CTL = msobj.Stop = 0; msobj.TimerID = setInterval(msobj.StartID, timer); }
}
msobj.Pause = function() { msobj.Stop = 1; clearInterval(msobj.TimerID); setTimeout(msobj.Continue, waittime); }
msobj.Begin = function() {
msobj.TimerID = setInterval(msobj.StartID, timer);
msobj.ID.onmouseover = function() { msobj.MouseOver = 1; clearInterval(msobj.TimerID); }
msobj.ID.onmouseout = function() { msobj.MouseOver = 0; if (msobj.Stop == 0) { clearInterval(msobj.TimerID); msobj.TimerID = setInterval(msobj.StartID, timer); } }
}
setTimeout(msobj.Begin, stoptime);
}
Marquee.prototype.Scroll = function() {
switch (this.Direction) {
case 0:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollTop += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollTop >= this.ClientScroll) this.ID.scrollTop -= this.ClientScroll; this.ID.scrollTop += this.Step; }
break;
case 1:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollTop -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollTop <= 0) this.ID.scrollTop += this.ClientScroll; this.ID.scrollTop -= this.Step; }
break;
case 2:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollLeft += this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollLeft >= this.ClientScroll) this.ID.scrollLeft -= this.ClientScroll; this.ID.scrollLeft += this.Step; }
break;
case 3:
this.CTL += this.Step;
if (this.CTL >= this.ScrollStep && this.WaitTime > 0) { this.ID.scrollLeft -= this.ScrollStep + this.Step - this.CTL; this.Pause(); return; }
else { if (this.ID.scrollLeft <= 0) this.ID.scrollLeft += this.ClientScroll; this.ID.scrollLeft -= this.Step; }
break;
}
}
</script>
控制使用代碼:複製代碼 代碼如下:<script type="text/javascript">
<!--
window.onload = function() {
new Marquee(
"s1", //容器ID
0, //向上滾動(0向上 1向下 2向左 3向右)
2, //滾動的步長
251, //容器可視寬度
520, //容器可視高度
50, //定時器 數值越小,滾動的速度越快(1000=1秒,建議不小於20)
2000, //間歇停頓時間(0為不停頓,1000=1秒)
3000, //開始時的等待時間(0為不等待,1000=1秒)
75 //間歇滾動間距(可選),可理解為行高,我這裡是3*25=75,就是每次滾動三行
);
};
-->
</script>
效果示範:<br />下方是我的HTML代碼,一看就明白怎麼回事了: </p><ul id="s1"><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li><li>第三帝國發大概得法規的非官方的鬼地方鬼地方</li></ul><p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]