本文主要为大家分享一篇10行原生JS实现文字无缝滚动的效果,特别简单,具有很好的参考价值,希望对大家有所帮助,希望能帮助到大家。
废话不多说,直接上代码
1 2 3 4 5 6 7 8 9 | <section class = "pro_quota_tip" >
<p class = "tip_box" >
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >aaaaaaaaa</a>
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >bbbbbbbbbbbbbb</a>
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >ccccccccccc</a>
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >ddddddddddddddd</a>
<a href= "javascript:;" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" >aaaaaaaaaaaaaa</a>
</p>
</section>
|
Salin selepas log masuk
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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;
}
|
Salin selepas log masuk
1 2 3 4 5 6 7 8 9 10 | 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)
|
Salin selepas log masuk
绝对的10行,简单实用,无依赖
相关推荐:
实例详解jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
实例讲解CSS3实现无限循环的无缝滚动
javascript实现轮播图无缝滚动效果
Atas ialah kandungan terperinci 10行JS实现文字无缝滚动简单方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!