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单行消息滚动代码,可添加无数个

    js单行消息滚动代码,可添加无数个

    JavaScript实现单行新闻滚动代码,可添加无数行,只要你有那么多内容,我觉得挺不错,发上来供大家使用和参考。
    2010-11-11
  • javascript 洒脱飘动的文字

    javascript 洒脱飘动的文字

    飘动的文字,看着还挺自在、洒脱,网上经常见的东西,原来是这么实现的,奉献给大家哦。
    2009-10-10
  • JS溶解形式的文字切换特效

    JS溶解形式的文字切换特效

    JavaScript形成溶解过渡形式的文字切换特效,够酷吧,的你平静如水的网页上旋转这么一个文字特效,一定会吸引不少人的注意力,文字内容和颜色以及字号大小看看代码就会知道怎么改了。
    2009-11-11
  • 简介内容超出部分文字隐藏省略的特效(可显示)

    简介内容超出部分文字隐藏省略的特效(可显示)

    如果字数找过特定的字符数,那么超过这个字符数后的文字就显示省略号... 然后出现【展开】或省略号,点击之后就出现全部内容
    2011-10-10
  • 5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

    5分钟教你学会超简单的html+css魔幻霓虹灯文字特效

    这篇文章5分钟教你学会超简单的html+css魔幻霓虹灯文字特效,只用简单的html+css就可以完成,不需要配置运行环境,魔幻的霓虹灯特效非常炫酷,一起来学习一下,需要的朋友可以参考下
    2023-03-03
  • 文字在网页上下浮动 学习可以不建议用

    文字在网页上下浮动 学习可以不建议用

    JavaScript控制文字像跳跳球一样在网页上浮动,碰到边缘自动回来,有兴趣看一下。
    2009-11-11
  • 一个实现字体大中小方法的JavaScript代码

    一个实现字体大中小方法的JavaScript代码

    再发一个实现字体大中小方法的JavaScript代码,这种效果估计大家在网上见到挺多了,点击适时改变网页上字体的大小,以适合不同人群的浏览体验,本代码较简单,使用方便。
    2011-08-08
  • 文字瞬间从左到右切换显示的JavaScript代码

    文字瞬间从左到右切换显示的JavaScript代码

    Javascript一文字修饰程序,不知如何来形容,看了比较喜欢,让一组文字不断的切换,显示时候从左到右瞬间切换完成,但还能让人感觉有动态变化的效果,有兴趣试一下,直接复制到你的网页上就能用了
    2009-10-10
  • javascript 网页上跳动的文字

    javascript 网页上跳动的文字

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

    JavaScript 平滑文字闪烁

    基于JavaScript的平滑文字闪烁,不是单纯的闪烁,貌似还带有一点点别的效果,比如淡入/淡出,那些颜色值你是可以变的,改成你想要的,还有闪烁间隔等,都可以修改的.
    2009-10-10

最新评论