javascript上下左右定時(shí)滾動(dòng)插件
更新時(shí)間:2010年06月19日 16:43:52 作者:
在網(wǎng)上找到的,我認(rèn)為最為方便的一段定時(shí)滾動(dòng)代碼,找了很多其他的總是有這樣那樣的問(wèn)題,好不容易找到的,就分享一下。
核心代碼:
<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, //向上滾動(dòng)(0向上 1向下 2向左 3向右)
2, //滾動(dòng)的步長(zhǎng)
251, //容器可視寬度
520, //容器可視高度
50, //定時(shí)器 數(shù)值越小,滾動(dòng)的速度越快(1000=1秒,建議不小于20)
2000, //間歇停頓時(shí)間(0為不停頓,1000=1秒)
3000, //開(kāi)始時(shí)的等待時(shí)間(0為不等待,1000=1秒)
75 //間歇滾動(dòng)間距(可選),可理解為行高,我這里是3*25=75,就是每次滾動(dòng)三行
);
};
-->
</script>
效果演示:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
復(fù)制代碼 代碼如下:
<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>
控制使用代碼:
復(fù)制代碼 代碼如下:
<script type="text/javascript">
<!--
window.onload = function() {
new Marquee(
"s1", //容器ID
0, //向上滾動(dòng)(0向上 1向下 2向左 3向右)
2, //滾動(dòng)的步長(zhǎng)
251, //容器可視寬度
520, //容器可視高度
50, //定時(shí)器 數(shù)值越小,滾動(dòng)的速度越快(1000=1秒,建議不小于20)
2000, //間歇停頓時(shí)間(0為不停頓,1000=1秒)
3000, //開(kāi)始時(shí)的等待時(shí)間(0為不等待,1000=1秒)
75 //間歇滾動(dòng)間距(可選),可理解為行高,我這里是3*25=75,就是每次滾動(dòng)三行
);
};
-->
</script>
效果演示:
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]
您可能感興趣的文章:
- js向上無(wú)縫滾動(dòng),網(wǎng)站公告效果 具體代碼
- js 上下文字滾動(dòng)效果
- 滾動(dòng)條響應(yīng)鼠標(biāo)滑輪事件實(shí)現(xiàn)上下滾動(dòng)的js代碼
- javascript之循環(huán)停頓上下滾動(dòng)
- js實(shí)現(xiàn)帶按鈕的上下滾動(dòng)效果
- JavaScript 無(wú)縫上下左右滾動(dòng)加定高定寬停頓效果(兼容ie/ff)
- 友情鏈接橫向文字上下間隙循環(huán)滾動(dòng)JS效果
- 兼容IE和Firefox火狐的上下、左右循環(huán)無(wú)間斷滾動(dòng)JS代碼
- javascript實(shí)現(xiàn)無(wú)縫上下滾動(dòng)特效
- 利用10行js代碼實(shí)現(xiàn)上下滾動(dòng)公告效果
相關(guān)文章
js單行消息滾動(dòng)代碼,可添加無(wú)數(shù)個(gè)
JavaScript實(shí)現(xiàn)單行新聞滾動(dòng)代碼,可添加無(wú)數(shù)行,只要你有那么多內(nèi)容,我覺(jué)得挺不錯(cuò),發(fā)上來(lái)供大家使用和參考。2010-11-11簡(jiǎn)介內(nèi)容超出部分文字隱藏省略的特效(可顯示)
如果字?jǐn)?shù)找過(guò)特定的字符數(shù),那么超過(guò)這個(gè)字符數(shù)后的文字就顯示省略號(hào)... 然后出現(xiàn)【展開(kāi)】或省略號(hào),點(diǎn)擊之后就出現(xiàn)全部?jī)?nèi)容2011-10-105分鐘教你學(xué)會(huì)超簡(jiǎn)單的html+css魔幻霓虹燈文字特效
這篇文章5分鐘教你學(xué)會(huì)超簡(jiǎn)單的html+css魔幻霓虹燈文字特效,只用簡(jiǎn)單的html+css就可以完成,不需要配置運(yùn)行環(huán)境,魔幻的霓虹燈特效非常炫酷,一起來(lái)學(xué)習(xí)一下,需要的朋友可以參考下2023-03-03文字在網(wǎng)頁(yè)上下浮動(dòng) 學(xué)習(xí)可以不建議用
JavaScript控制文字像跳跳球一樣在網(wǎng)頁(yè)上浮動(dòng),碰到邊緣自動(dòng)回來(lái),有興趣看一下。2009-11-11一個(gè)實(shí)現(xiàn)字體大中小方法的JavaScript代碼
再發(fā)一個(gè)實(shí)現(xiàn)字體大中小方法的JavaScript代碼,這種效果估計(jì)大家在網(wǎng)上見(jiàn)到挺多了,點(diǎn)擊適時(shí)改變網(wǎng)頁(yè)上字體的大小,以適合不同人群的瀏覽體驗(yàn),本代碼較簡(jiǎn)單,使用方便。2011-08-08javascript 網(wǎng)頁(yè)上跳動(dòng)的文字
網(wǎng)頁(yè)上跳動(dòng)的文字,代碼稍復(fù)雜,效果挺可愛(ài)的,一跳一跳的文字,真逗人!2009-10-10