javascript上下左右定时滚动插件

 更新时间:2010年06月19日 16:43:52   作者:  
在网上找到的,我认为最为方便的一段定时滚动代码,找了很多其他的总是有这样那样的问题,好不容易找到的,就分享一下。
核心代码:
复制代码 代码如下:

<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>

效果演示:

[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]

相关文章

  • JS、CSS文字切换,定时交替,代码精简

    JS、CSS文字切换,定时交替,代码精简

    图片切换很流行,文字切换也很实用哦,而且用CSS与JavaScript配合,避免纯JS实现时把文字写进JavaScript代码里,修改不方便,本款可以说是方便,简单,效果实用,兼容性好.
    2009-10-10
  • javascript 模拟Marquee文字向左均匀滚动代码

    javascript 模拟Marquee文字向左均匀滚动代码

    Marquee是HTML语言里固有的文字滚动标签,虽然用着方便,但是功能上有一些限制,很多时候我们都是通过JavaScript来补充这一功能.
    2009-10-10
  • Js+CSS 文字渐隐渐现显示

    Js+CSS 文字渐隐渐现显示

    JavaScript文字渐隐渐现显示,更专业的说法叫淡入淡出,最开始用于视频蒙太奇制作及Flash动画上,现在用到文字上也不是什么稀罕事了.
    2009-10-10
  • Js+CSS实现的间断和不间断文本滚动代码

    Js+CSS实现的间断和不间断文本滚动代码

    Js+CSS间断和不间断文本滚动代码,文字在一行高度范围内不间断滚动,还有一个是间断滚动,滚动一次后会稍停片刻再次滚动。
    2010-10-10
  • Js 网页上反复显示隐藏效果的文本

    Js 网页上反复显示隐藏效果的文本

    一个JavaScript特效,在网页上反复显示一些可隐藏的文字,快速滚入而后快速消失,很不错的文字效果。
    2010-03-03
  • CSS 动态链接提示

    CSS 动态链接提示

    CSS实现动态的链接提示,带动画效果,当然,这不光是CSS的功劳,JavaScript也用上了,当你把鼠标放到文字上的时候,你就会看到一行提示文字出现的效果了。
    2009-10-10
  • Javascript 小写字母依次变为大写

    Javascript 小写字母依次变为大写

    Javascript把小写字母依次变为大写,严格来说不算是大小写转换程序,它主要是把文字按一定顺序依次变为小写的,估计有人要用到吧。
    2009-10-10
  • 仿打字特效的JS逐字出现的信息文字

    仿打字特效的JS逐字出现的信息文字

    JavaScript编写的文字特效,看似打字的效果,让文字逐个出现,你可以以这个为基础给你心爱的人写一段祝福的语,这的确挺合适。
    2009-10-10
  • 让链接必须按先后顺序点击的JS代码

    让链接必须按先后顺序点击的JS代码

    让链接必须按先后顺序点击的JS代码,用到广告上面比较好,有不少的文字或图片广告有类似效果,点链接的时候需要按顺序,请注意链接地址,写在JS代码里的是真正需要的地址。
    2009-10-10
  • javascript 网页上跳动的文字

    javascript 网页上跳动的文字

    网页上跳动的文字,代码稍复杂,效果挺可爱的,一跳一跳的文字,真逗人!
    2009-10-10

最新评论