JS實現文字滾動效果
阿新 • • 發佈：2019-01-26
分別實現無縫滾動和間歇滾動
間歇滾動有問題_(:зゝ∠)_，第一個ul的正常滾動，到第二個的時候就開始無縫滾動，目前沒找到問題在哪裡，找到會進行修改
效果圖
程式碼：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } #scrollBox{ width:300px; height:200px;overflow:hidden; border:3px solid green; margin:20px auto; text-align:center; } #scrollBox1{ width:300px; height:200px; overflow:hidden; border:3px solid green; margin:20px auto; text-align:center; } ul li{ list-style-type:none; line-height:30px; font-size:24px height:30px; width:100%; } p{ text-align:center; } </style> </head> <body> <br> <br> <p>無縫滾動</p> <div id="scrollBox"> <ul id="ul1"> <li>第1條滾動資訊_(:зゝ∠)_</li> <li>第2條滾動資訊_(:зゝ∠)_</li> <li>第3條滾動資訊_(:зゝ∠)_</li> <li>第4條滾動資訊_(:зゝ∠)_</li> <li>第5條滾動資訊_(:зゝ∠)_</li> <li>第6條滾動資訊_(:зゝ∠)_</li> <li>第7條滾動資訊_(:зゝ∠)_</li> <li>第8條滾動資訊_(:зゝ∠)_</li> <li>第9條滾動資訊_(:зゝ∠)_</li> <li>第10條滾動資訊_(:зゝ∠)_</li> <li>第11條滾動資訊_(:зゝ∠)_</li> <li>第12條滾動資訊_(:зゝ∠)_</li> </ul> <ul id="ul2"></ul> </div> <p>間歇滾動</p> <div id="scrollBox1"> <ul id="ul11"> <li>第1條滾動資訊_(:зゝ∠)_</li> <li>第2條滾動資訊_(:зゝ∠)_</li> <li>第3條滾動資訊_(:зゝ∠)_</li> <li>第4條滾動資訊_(:зゝ∠)_</li> <li>第5條滾動資訊_(:зゝ∠)_</li> <li>第6條滾動資訊_(:зゝ∠)_</li> <li>第7條滾動資訊_(:зゝ∠)_</li> <li>第8條滾動資訊_(:зゝ∠)_</li> <li>第9條滾動資訊_(:зゝ∠)_</li> <li>第10條滾動資訊_(:зゝ∠)_</li> <li>第11條滾動資訊_(:зゝ∠)_</li> <li>第12條滾動資訊_(:зゝ∠)_</li> </ul> <ul id="ul22"></ul> </div> <script> //無縫滾動 var area=document.getElementById("scrollBox"); var ul1=document.getElementById("ul1"); var ul2=document.getElementById("ul2"); ul2.innerHTML=ul1.innerHTML; function scrollUp(){ if(area.scrollTop>ul1.offsetHeight){ area.scrollTop=0; }else{ area.scrollTop++; } } var speed=50; var myScroll=setInterval('scrollUp()',speed); area.onmouseover= function () { clearInterval(myScroll); }; area.onmouseout= function () { myScroll=setInterval('scrollUp()',speed); }; //間歇滾動 var area1=document.getElementById("scrollBox1"); var ul11=document.getElementById("ul11"); var ul22=document.getElementById("ul22"); ul22.innerHTML=ul11.innerHTML; var iHeight=30; var speed1=50; var delay=2000; area1.scrollTop=0; var time; function startMove() { area1.scrollTop++; time=setInterval("scrollUp1()",speed1); } function scrollUp1(){ area1.scrollTop++; if(area1.scrollTop%iHeight==0){ clearInterval(time); setTimeout("startMove()",delay); }else{ area1.scrollTop++; if(area1.scrollTop>=area1.scrollHeight/2){ area1.scrollTop=0; } } } setTimeout("startMove()",delay); </script> </body> </html>