php无缝滚动文字,使用JS如何实现文字无缝滚动

下面我就为大家分享一篇10行原生JS实现文字无缝滚动的效果，特别简单，具有很好的参考价值，希望对大家有所帮助

废话不多说，直接上代码

aaaaaaaaa

bbbbbbbbbbbbbb

ccccccccccc

ddddddddddddddd

aaaaaaaaaaaaaa

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;

}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)

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：