This article describes the method of JS to achieve uninterrupted scrolling of single-line text. Share it for your reference. The specific analysis is as follows:
A few days ago, I wrote a single line of text to scroll upward continuously for a friend. Now I share it with the webers I need. Let's look at HTML and CSS code first:
CSS:
Copy the code as follows:.wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;}
.roll-wrap{height:130px;overflow:hidden;}
HTML:
Copy the code as follows: <div>
<div id="roll-wrap">
<ul>
<li>JS text scrolling up 1</li>
<li>JS text scrolling up 2</li>
<li>JS text scrolling up 3</li>
<li>JS text scrolling up 4</li>
<li>JS text scrolling up 5</li>
<li>JS text scrolling up 6</li>
<li>JS text scrolling upwards 7</li>
</ul>
</div>
</div>
The principle of this animation effect is to first scroll the ul upwards the height of a li, and after scrolling, the first li in ul is placed at the end of ul. At this time, the original second li becomes the first li in ul, and then repeat the above actions, and repeat the continuous scrolling.
JS (jQuery) code:
Copy the code as follows: function scrollTxt(){
var controls={},
values={},
t1=200, /*Time to play the animation*/
t2=2000, /*Play time interval*/
si;
controls.rollWrap=$("#roll-wrap");
controls.rollWrapUl=controls.rollWrap.children();
controls.rollWrapLIs=controls.rollWrapUl.children();
values.liNums=controls.rollWrapLIs.length;
values.liHeight=controls.rollWrapLIs.eq(0).height();
values.ulHeight=controls.rollWrap.height();
this.init=function(){
autoPlay();
pausePlay();
}
/*scroll*/
function play(){
controls.rollWrapUl.animate({"margin-top" : "-"+values.liHeight}, t1, function(){
$(this).css("margin-top" , "0").children().eq(0).appendTo($(this));
});
}
/*Auto scroll*/
function autoPlay(){
/*Scroll if the height and height of all li tags are greater than the height of .roll-wrap */
if(values.liHeight*values.liNums > values.ulHeight){
si=setInterval(function(){
play();
},t2);
}
}
/*Scrolling pauses when the mouse passes by ul*/
function pausePlay(){
controls.rollWrapUl.on({
"mouseenter":function(){
clearInterval(si);
},
"mouseleave":function(){
autoPlay();
}
});
}
}
new scrollTxt().init();
I hope this article will be helpful to everyone's JavaScript programming.