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
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>
|
Copy after login
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;
}
|
Copy after login
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)
|
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!