How to achieve seamless text scrolling using JS-JS Tutorial-php.cn

Now I will share 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

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to implement websocket communication function in nodejs

How to implement binding click event in js (detailed tutorial )

How to implement SSR through Vue (detailed tutorial)

How to build a d3 force-directed graph using react (detailed tutorial)

How to use nodejs to achieve instant messaging

About axios related Vue.use issues

How to use nodejs Implement chat function?

The above is the detailed content of How to achieve seamless text scrolling using JS. For more information, please follow other related articles on the PHP Chinese website!