微客导航 » 文章资讯 » 10行原生JS实现文字无缝滚动(超简单)

10行原生JS实现文字无缝滚动(超简单)

2023-09-18 12:14:05 170

废话不多说，直接上代码



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:0auto;
margin-top:10%
}
.pro_quota_tip.tip_box{
position:relative;
}
.pro_quota_tip.tip_boxa{
color:red;
display:block;
width:100%;
padding:15px5px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}

vartip_box_a_h=document.querySelectorAll('.tip_boxa')[0].offsetHeight;
vari=0;
setInterval(()=>{
letstartScroll=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_boxa').length-2)))i=0;
},2500)

绝对的10行，简单实用，无依赖

以上这篇10行原生JS实现文字无缝滚动(超简单)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

10行原生JS实现文字无缝滚动(超简单)

热门推荐

随机推荐