时间:2021-05-25
/*MSClass(ClassOfMarqueeScroll通用不间断滚动JS封装类)Ver1.6*\
制作时间:2006-08-29(Ver0.5)
发布时间:2006-08-31(Ver0.8)
更新时间:2007-01-31(Ver1.6)
更新说明:+加入功能*修正、完善
1.6.070131
+禁止鼠标控制暂停或继续(将第9个参数设置为-1或者动态赋值将ScrollSetp设置为-1)
+判断是否可以滚动(若内容区域小于显示区域,则自动取消滚动)
+跳过初始化错误(避免引起其它滚动的停止)
+默认值(除容器ID必选外,其他参数均可根据情况进行选择设置)
+参数动态赋值(方向可用英文表示top|bottom|left|right,使其更直观、方便)
*文字滚动不准确(本次更新主要目的解决此Bug,感谢周珺参与测试)
1.4.061211
+鼠标悬停改变滚动方向(鼠标悬停控制左右滚动)
*由于文档下载过慢而导致获取的高度/宽度不准确
*浏览器兼容问题(IE、FF、Opera、NS、MYIE)
1.2.060922
+指定范围间歇滚动
*程序调整
*连续间歇滚动停止的错误
1.0.060901
+向下、向右滚动
+开始等待时间
+连续滚动
*调整时间单位
*滚动误差
*随机死循环
*加强性能
*程序优化
0.8.060829
翻屏不间断向上、向左滚动
演示地址:http://网址:http://www.popub.net***/
复制代码 代码如下:
<!--
functionMarquee()
{
this.ID=document.getElementById(arguments[0]);
if(!this.ID)
{
alert("您要设置的\""+arguments[0]+"\"初始化错误\r\n请检查标签ID设置是否正确!");
this.ID=-1;
return;
}
this.Direction=this.Width=this.Height=this.DelayTime=this.WaitTime=this.Correct=this.CTL=this.StartID=this.Stop=this.MouseOver=0;
this.Step=1;
this.Timer=30;
this.DirectionArray={"top":0,"bottom":1,"left":2,"right":3};
if(typeofarguments[1]=="number")this.Direction=arguments[1];
if(typeofarguments[2]=="number")this.Step=arguments[2];
if(typeofarguments[3]=="number")this.Width=arguments[3];
if(typeofarguments[4]=="number")this.Height=arguments[4];
if(typeofarguments[5]=="number")this.Timer=arguments[5];
if(typeofarguments[6]=="number")this.DelayTime=arguments[6];
if(typeofarguments[7]=="number")this.WaitTime=arguments[7];
if(typeofarguments[8]=="number")this.ScrollStep=arguments[8]
this.ID.style.overflow=this.ID.style.overflowX=this.ID.style.overflowY="hidden";
this.ID.noWrap=true;
this.IsNotOpera=(navigator.userAgent.toLowerCase().indexOf("opera")==-1);
if(arguments.length>=7)this.Start();
}
Marquee.prototype.Start=function()
{
if(this.ID==-1)return;
if(this.WaitTime<800)this.WaitTime=800;
if(this.Timer<20)this.Timer=20;
if(this.Width==0)this.Width=parseInt(this.ID.style.width);
if(this.Height==0)this.Height=parseInt(this.ID.style.height);
if(typeofthis.Direction=="string")this.Direction=this.DirectionArray[this.Direction.toString().toLowerCase()];
this.HalfWidth=Math.round(this.Width/2);
this.BakStep=this.Step;
this.ID.style.width=this.Width;
this.ID.style.height=this.Height;
if(typeofthis.ScrollStep!="number")this.ScrollStep=this.Direction>1?this.Width:this.Height;
//this.ID.innerHTML+=this.ID.innerHTML;
varmsobj=this;
vartimer=this.Timer;
vardelaytime=this.DelayTime;
varwaittime=this.WaitTime;
msobj.StartID=function(){msobj.Scroll()}
msobj.Continue=function()
{
if(msobj.MouseOver==1)
{
setTimeout(msobj.Continue,delaytime);
}
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,delaytime);
}
msobj.Begin=function()
{
msobj.ClientScroll=msobj.Direction>1?msobj.ID.scrollWidth:msobj.ID.scrollHeight;
if((msobj.Direction<=1&&msobj.ClientScroll<msobj.Height)||(msobj.Direction>1&&msobj.ClientScroll<msobj.Width))return;
msobj.ID.innerHTML+=msobj.ID.innerHTML;
msobj.TimerID=setInterval(msobj.StartID,timer);
if(msobj.ScrollStep<0)return;
msobj.ID.onmousemove=function(event)
{
if(msobj.ScrollStep==0&&msobj.Direction>1)
{
varevent=event||window.event;
if(window.event)
{
if(msobj.IsNotOpera)
{
msobj.EventLeft=event.srcElement.id==msobj.ID.id?event.offsetX-msobj.ID.scrollLeft:event.srcElement.offsetLeft-msobj.ID.scrollLeft+event.offsetX;
}
else
{
msobj.ScrollStep=null;
return;
}
}
else
{
msobj.EventLeft=event.layerX-msobj.ID.scrollLeft;
}
msobj.Direction=msobj.EventLeft>msobj.HalfWidth?3:2;
msobj.AbsCenter=Math.abs(msobj.HalfWidth-msobj.EventLeft);
msobj.Step=Math.round(msobj.AbsCenter*(msobj.BakStep*2)/msobj.HalfWidth);
}
}
msobj.ID.onmouseover=function()
{
if(msobj.ScrollStep==0)return;
msobj.MouseOver=1;
clearInterval(msobj.TimerID);
}
msobj.ID.onmouseout=function()
{
if(msobj.ScrollStep==0)
{
if(msobj.Step==0)msobj.Step=1;
return;
}
msobj.MouseOver=0;
if(msobj.Stop==0)
{
clearInterval(msobj.TimerID);
msobj.TimerID=setInterval(msobj.StartID,timer);
}
}
}
setTimeout(msobj.Begin,waittime);
}
Marquee.prototype.Scroll=function()
{
switch(this.Direction)
{
case0:
this.CTL+=this.Step;
if(this.CTL>=this.ScrollStep&&this.DelayTime>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;
case1:
this.CTL+=this.Step;
if(this.CTL>=this.ScrollStep&&this.DelayTime>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;
case2:
this.CTL+=this.Step;
if(this.CTL>=this.ScrollStep&&this.DelayTime>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;
case3:
this.CTL+=this.Step;
if(this.CTL>=this.ScrollStep&&this.DelayTime>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;
}
}
//-->
在线演示
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
DIV+CSS+JS实现不间断横向滚动代码复制代码代码如下:横向不间断滚动DIVCSS代码-DIVCSS5.scroll_div{width:600px;hei
本文实例讲述了JS实现单行文字不间断向上滚动的方法。分享给大家供大家参考。具体分析如下:前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要
再次更新!MSClass(ClassOfMarqueeScroll通用不间断滚动JS封装类Ver1.6)/*MSClass(ClassOfMarqueeScro
1.先写两个最常用最简洁的滚动代码代码如下:水平滚动:水平滚动字幕内容垂直滚动:垂直滚动字内容2.平稳不间断滚动复制代码代码如下:vartm=nullfunct
我们一般都用Marquee标签控制元素的滚动。但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白。而下面介绍中的滚动则是连续的,毫不间断。