效果類似：(抱歉，圖片是靜態的)

寫一段html，需要走馬燈上下跳動的內容，但每次只顯示一行：

<hr size="0" align="center" style="border-top: 1px solid #F5F5F5;"/> <div id="marqueebox0" style="overflow: hidden; height: 26px; line-height: 26px; font-size: 14px;">?<a href="/" target="_blank">測試第一行</a><br/>?<a href="/" target="_blank">測試第二行</a><br/>?<a href="/" target="_blank">測試第三行</a><br/>?<a href="/" target="_blank">測試第四行</a><br/>?<a href="/" target="_blank">測試第五行</a><br/> </div>

?

實現走馬燈效果的簡單JS：

/*開始走馬燈*/ function startmarquee(lh/*line-height*/,speed/*50*/,delay/*3000*/,id/*element id*/){var t;var p=false;var o=document.getElementById(id);o.innerHTML+=o.innerHTML;o.οnmοuseοver=function(){p=true}o.οnmοuseοut=function(){p=false}o.scrollTop = 0;function start(){t=setInterval(scrolling,speed);if(!p) o.scrollTop += 2;}function scrolling(){if(o.scrollTop%lh!=0){o.scrollTop += 2;if(o.scrollTop>=o.scrollHeight/2) o.scrollTop = 0;}else{clearInterval(t);setTimeout(start,delay);}}setTimeout(start,delay); }/*啟動效果*/ try{ startmarquee(26,50,3000,"marqueebox0"); }catch(e){}

轉載于:https://www.cnblogs.com/Mainz/archive/2009/09/21/1570872.html

總結

以上是生活随笔為你收集整理的简单JS实现走马灯效果的文字(无需jQuery)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。