js实战之-间断文字滑动 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <title>js-间断文字滑动</title>
 5 <meta http-equiv="content-type" content="text/html;charset=gb2312">
 6 <style type="text/css">
 7 .scroll{
 8 height:20px;
 9 overflow:hidden;
10 font-size:12px;
11 line-height:20px;
12 border:#A5A5A5 1px dotted;
13 width:120px;
14 margin:0px auto;
15 text-align:center;
16 }
17 </style>
18 <script language="javascript" type="text/javascript">
19 var s,sn=0,timer,slen,timer2;
20 function scrollInit(){ 
21  s=getid("s1");
22  s.scrollTop=0;
23  slen=s.innerHTML.split("|");
24  s.innerHTML="";
25  for(var i=0;i<slen.length;i++){s.innerHTML+=(slen[i]+"<br />");}
26  s.innerHTML+=slen[0];
27  timer2=setInterval(scrollstart,3000);
28  s.onmouseover=function(){clearInterval(timer2);clearInterval(timer);s.style.backgroundColor="#ccc";}
29  s.onmouseout=function(){timer2=setInterval(scrollstart,3000);s.style.backgroundColor="#fff";}
30 }
31 function scrollstart(){
32  if(s.scrollTop>=(slen.length*20)){s.scrollTop=0;}
33  timer=setInterval(scrollexec,30); 
34  }
35 function scrollexec(){
36  if(sn<20){
37   sn++;
38   s.scrollTop++;
39   }else{
40    sn=0;
41    clearInterval(timer);
42    }  
43  }
44 function getid(id){return document.getElementById(id);}
45 window.onload=scrollInit;
46 </script>
47 </head>
48 <body>
49 <div id="s1" class="scroll">北 京|上 海|广 州|西 安|南 京|大 连|哈尔滨|武 汉</div>
50 </body>
51 </html>

 

posted @ 2013-07-11 11:41  梦飞无颜  阅读(164)  评论(0)  编辑  收藏  举报