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>