基于Marquee.js插件实现的跑马灯效果示例
本文实例讲述了基于Marquee.js插件实现的跑马灯效果。分享给大家供大家参考，具体如下：
1、Marquee.js文件
/****************************************************************
-Marquee.js
-参数：
-ID：滚动对象（必须）
-Direction：滚动方向（"top":0,"up":0,"bottom":1,"down":1,"left":2,"right":3）
-Step：步伐
-Width：宽度
-Height：高度
-Timer：影响步伐滚动速度
-DelayTime：延时时间
-WaitTime：初始化时的等待时间
-ScrollStep：卷页步伐
*****************************************************************/
functionMarquee(obt){
if(obt==null||obt==""){
return;
}
this.ID=document.getElementById(obt.ID);
if(!this.ID){
alert("初始化错误\r\n请检查标签id设置是否正确!");
this.id=-1;
return;
}
this.Direction=this.Width=this.Height=this.DelayTime=this.WaitTime=this.CTL=this.StartID=this.Stop=this.MouseOver=0;
this.Step=1;
this.Timer=30;
this.DirectionArray={"top":0,"up":0,"bottom":1,"down":1,"left":2,"right":3};
if(typeofobt.Direction=="number"&&obt.Direction)this.Direction=obt.Direction;
if(typeofobt.Direction=="string"&&obt.Direction)this.Direction=this.DirectionArray[obt.Direction.toString().toLowerCase()];
if(typeofobt.Step=="number"&&obt.Step)this.Step=obt.Step;
if(typeofobt.Width=="number"&&obt.Width)this.Width=obt.Width;
if(typeofobt.Height=="number"&&obt.Height)this.Height=obt.Height;
if(typeofobt.Timer=="number"&&obt.Timer)this.Timer=obt.Timer;
if(typeofobt.DelayTime=="number"&&obt.DelayTime)this.DelayTime=obt.DelayTime;
if(typeofobt.WaitTime=="number"&&obt.WaitTime)this.WaitTime=obt.WaitTime;
if(typeofobt.ScrollStep=="number"&&obt.ScrollStep)this.ScrollStep=obt.ScrollStep;
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);
this.Start();
}
Marquee.prototype.Start=function(){
if(this.ID==-1)return;
if(this.Width==0)this.Width=parseInt(this.ID.style.width);
if(this.Height==0)this.Height=parseInt(this.ID.style.height);
if(this.Timer<20)this.Timer=20;
if(this.WaitTime<800)this.WaitTime=800;
this.HalfWidth=Math.round(this.Width/2);
this.HalfHeight=Math.round(this.Height/2);
this.BakStep=this.Step;
this.ID.style.width=this.Width+"px";
this.ID.style.height=this.Height+"px";
if(typeofthis.ScrollStep!="number")this.ScrollStep=this.Direction>1?this.Width:this.Height;
vartemplateLeft="<tablecellspacing='0'cellpadding='0'style='border-collapse:collapse;display:inline;'><tr><tdnoWrap=truestyle='white-space:nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td><tdnoWrap=truestyle='white-space:nowrap;word-break:keep-all;'>MSCLASS_TEMP_HTML</td></tr></table>";
vartemplateTop="<tablecellspacing='0'cellpadding='0'style='border-collapse:collapse;'><tr><td>MSCLASS_TEMP_HTML</td></tr><tr><td>MSCLASS_TEMP_HTML</td></tr></table>";
varmsobj=this;
msobj.tempHTML=msobj.ID.innerHTML;
if(msobj.Direction<=1){
msobj.ID.innerHTML=templateTop.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);
}
else{
if(msobj.ScrollStep==0&&msobj.DelayTime==0){
msobj.ID.innerHTML+=msobj.ID.innerHTML;
}
else{
msobj.ID.innerHTML=templateLeft.replace(/MSCLASS_TEMP_HTML/g,msobj.ID.innerHTML);
}
}
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/2:msobj.ID.scrollHeight/2;
if((msobj.Direction<=1&&msobj.ClientScroll<=msobj.Height+msobj.Step)||(msobj.Direction>1&&msobj.ClientScroll<=msobj.Width+msobj.Step)){
msobj.ID.innerHTML=msobj.tempHTML;
delete(msobj.tempHTML);
return;
}
delete(msobj.tempHTML);
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;
}
}
2、脚本调用
window.onload=function(){
newMarquee({ID:"scrollNews",Direction:"top",Step:2,Width:0,Height:80,Timer:50,DelayTime:1000,WaitTime:1000,ScrollStep:80});
}
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。