1 <html> 2 <head> 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>test</title> 5 <script type="text/javascript" src="jquery-1.11.1.min.js"></script> 6 7 <style type="text/css"> 8 *{ 9 padding:0; 10 margin:0; 11 border:none; 12 } 13 #news{ 14 width:300px; 15 height:100px; 16 margin:20px auto; 17 background-color:rgb(236, 231, 159); 18 border:#039 solid 1px; 19 overflow:hidden;/*這里必須設置哦，否則滾動會消失的，如果設置為scroll，更容易明白原理*/ 20 } 21 #news li{ 22 line-height:30px; 23 } 24 </style> 25 </head> 26 <body> 27 <div id="news" onmouseover="tz()" onmouseout="ks()"> 28 <ul id="p1"> 29 <li><a href="">1這是測試新聞滾動效果</a></li> 30 <li><a href="">2這是測試新聞滾動效果</a></li> 31 <li><a href="">3這是測試新聞滾動效果</a></li> 32 <li><a href="">4這是測試新聞滾動效果</a></li> 33 <li><a href="">5這是測試新聞滾動效果</a></li> 34 <li><a href="">6這是測試新聞滾動效果</a></li> 35 <li><a href="">7這是測試新聞滾動效果</a></li> 36 <li><a href="">8這是測試新聞滾動效果</a></li> 37 </ul> 38 <ul id="p2"> 39 </ul> 40 </div> 41 <script type="text/javascript"> 42 var n=document.getElementById("news"); 43 var p1=document.getElementById("p1"); 44 var p2=document.getElementById("p2"); 45 p2.innerHTML=p1.innerHTML; 46 //alert(n.offsetHeight+" 1 "+p1.offsetHeight); 47 var f=function(){ 48 n.scrollTop++; 49 if(n.scrollTop>=p1.offsetHeight){ 50 //alert(n.scrollTop+" 1 "+p1.offsetHeight); 51 n.scrollTop=0; 52 } 53 } 54 var i=setInterval(f,20); 55 var tz=function(){ 56 clearInterval(i); 57 } 58 var ks=function(){ 59 i=setInterval(f,20); 60 } 61 </script> 62 </body> 63 </html>
請注意：有jQuery的封裝函數
知識點：
