javascript三组文字间隙滚动实例代码_javascript技巧

来源：动视网责编：小采时间：2020-11-27 20:39:29

javascript三组文字间隙滚动实例代码_javascript技巧

javascript三组文字间隙滚动实例代码_javascript技巧: 三组文字间隙滚动 *{font-size:12px;} #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;} 国家汇率名称今日汇率美元USD ŀ.775% 港币HKD

推荐度：

点击下载本文 文档为doc格式

导读javascript三组文字间隙滚动实例代码_javascript技巧: 三组文字间隙滚动 *{font-size:12px;} #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;} 国家汇率名称今日汇率美元USD ŀ.775% 港币HKD

<html>

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
<meta http-equiv="Content-Language" content="zh-CN"> 
<title>三组文字间隙滚动</title> 
<style type="text/css"> 
 *{font-size:12px;} 
 #scrollBox2{width:150px; height:64px; line-height:22px; overflow:hidden; background-color:#eee;} 
</style> 
</head>

<body>

国家 汇率名称 今日汇率 
 
 美元USD ŀ.775%<br> 
 港币HKD ŀ.75%<br> 
 英镑GBP ŀ.50%<br> 
 欧元EUR ŀ.25%<br> 
 日元JPY ŀ.01%<br> 
 
 
window.onload=function(){ 
 new Marquee( 
 "scrollBox2", //容器ID<br> 
 0, //向上滚动(0向上 1向下 2向左 3向右)<br> 
 2, //滚动的步长<br> 
 200, //容器可视宽度<br> 
 64, //容器可视高度<br> 
 50, //定时器 数值越小，滚动的速度越快(1000=1秒,建议不小于20)<br> 
 2000, //间歇停顿时间(0为不停顿,1000=1秒)<br> 
 1000, //开始时的等待时间(0为不等待,1000=1秒)<br> 
 22 //间歇滚动间距(可选)<br> 
 ); 
 }; 
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> 
<p>　</p><script type="text/javascript" src="https://jss.51dongshi.net/pcwz/wenzhong.js"></script> 
<p>　</p> 
<p>　</p>

</body>

</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

javascript三组文字间隙滚动实例代码_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：文字技巧滚动

热门焦点

javascript三组文字间隙滚动实例代码_javascript技巧

javascript三组文字间隙滚动实例代码_javascript技巧

javascript三组文字间隙滚动实例代码_javascript技巧

最新推荐

猜你喜欢

热门推荐