下面前端入门建站教程为大家介绍一下js实现多行一起滚动
<style> #test{ width:100%; height: calc(25vh); line-height: 22px; overflow: hidden; } </style> <div id="test"> aaaaaaaaaaaaaaaaaaa1<br> aaaaaaaaaaaaaaaaaaa2<br> aaaaaaaaaaaaaaaaaaa3<br> aaaaaaaaaaaaaaaaaaa4<br> aaaaaaaaaaaaaaaaaaa5<br> aaaaaaaaaaaaaaaaaaa6<br> aaaaaaaaaaaaaaaaaaa7<br> aaaaaaaaaaaaaaaaaaa8<br> aaaaaaaaaaaaaaaaaaa9<br> bbbbbbbbbbbbbbbbbbb1<br> bbbbbbbbbbbbbbbbbbb2<br> bbbbbbbbbbbbbbbbbbb3<br> bbbbbbbbbbbbbbbbbbb4<br> bbbbbbbbbbbbbbbbbbb5<br> bbbbbbbbbbbbbbbbbbb6<br> </div> <script> var oMarquee = document.getElementById("test"); //滚动对象 var iLineHeight = 22; //单行高度,像素 var iLineCount = 15; //实际行数 var iScrollAmount = 8.8; //每次滚动高度,像素*10 function run() { oMarquee.scrollTop += iScrollAmount; if ( oMarquee.scrollTop == iLineCount * iLineHeight ) oMarquee.scrollTop = 0; if ( oMarquee.scrollTop % iLineHeight == 0 ) { window.setTimeout( run, 2000 ); } else { window.setTimeout( run, 50 ); } } oMarquee.innerHTML += oMarquee.innerHTML; window.setTimeout( run, 2000 ); </script>
上面是“js实现多行一起滚动”的全面内容,想了解更多关于 js 文章,请继续关注前端入门建站教程。