A simple way to achieve seamless scrolling of text in 10 lines of JS-JS Tutorial-php.cn

This article mainly shares with you an article about 10 lines of native JS to achieve the effect of seamless text scrolling. It is very simple and has good reference value. I hope it will be helpful to everyone. I hope it can help everyone.

No more nonsense, just go to the code

  aaaaaaaaa bbbbbbbbbbbbbb ccccccccccc ddddddddddddddd aaaaaaaaaaaaaa

Copy after login

body,#app{ margin: 0; padding: 0; font-family:Helvetica; background: #f0efef !important; width: 100%; overflow-x: hidden; } a{ text-decoration: none; } .pro_quota_tip{ background: #fff; font-size: 14px; overflow: hidden; width: 200px; height: 49px; margin:0 auto; margin-top:10% } .pro_quota_tip .tip_box{ position: relative; } .pro_quota_tip .tip_box a{ color: red; display: block; width: 100%; padding:15px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

Copy after login

var tip_box_a_h = document.querySelectorAll('.tip_box a')[0].offsetHeight; var i=0; setInterval(()=>{ let startScroll = setInterval(()=>{ i++; document.querySelector('.tip_box').style.bottom = (tip_box_a_h/10)*i+'px'; if(i%10==0)clearInterval(startScroll); },50) if(i>(10*(document.querySelectorAll('.tip_box a').length-2)))i = 0; },2500)

Copy after login

Absolute 10 lines, simple and practical, no dependencies

Related recommendations:

Examples Detailed explanation of jQuery's implementation of accordion menu, hierarchical menu, top menu, and seamless scrolling effect

Example explanation of CSS3's implementation of infinite loop seamless scrolling

JavaScript realizes the seamless scrolling effect of carousel images

The above is the detailed content of A simple way to achieve seamless scrolling of text in 10 lines of JS. For more information, please follow other related articles on the PHP Chinese website!