首頁 > 開發者 > JavaScript
JS實現的文字間歇迴圈滾動效果完整樣本，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><div id="box"> <ul id="con1"> <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> </ul></div><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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
