這次帶給大家JS文字間歇循環滾動效果怎麼實現,JS文字間歇循環滾動效果實現的注意事項有哪些,下面就是實戰案例,一起來看一下。
具體程式碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>www.jb51.net - 间歇循环滚动</title> <style> #box{ height:240px; width:300px; margin:0 auto; border:1px solid #0066FF; overflow:hidden; padding-bottom:20px; } #box li{ color:#333; height:24px; } #box ul{ margin:0; padding:0; } </style> </head> <body> <p id="box"> <ul id="con1"> <li>PHP1</li> <li>PHP2</li> <li>PHP3</li> <li>PHP4</li> <li>PHP5</li> <li>PHP6</li> <li>PHP7</li> <li>PHP8</li> <li>PHP9</li> </ul> </p> <script> var area=document.getElementById("box"); area.innerHTML+=area.innerHTML; var liHeight=24; area.scrollTop=0; var delay=2000; var speed=50; var time; function starMove(){ area.scrollTop++; time=setInterval("scrollUp()",speed); } function scrollUp(){ if(area.scrollTop%liHeight==0){ clearInterval(time); setTimeout("starMove()",delay); }else{ area.scrollTop++; if(area.scrollTop>=area.offsetHeight/2){ area.scrollTop=0; } } } setTimeout("starMove()",delay); </script> </body> </html>
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是JS文字間歇循環滾動效果怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章!