Home >Web Front-end >JS Tutorial >How to achieve text intermittent cycle scrolling effect through JS
This article mainly introduces the text intermittent cycle scrolling effect implemented by JS, involving JavaScript combined with time function timing triggering to achieve dynamic operation of page elements and related techniques. Friends in need can refer to the following
The examples of this article describe JS Realized text intermittent cycle scrolling effect. Share it with everyone for your reference, the details are as follows:
The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>www.jb51.net - 间歇循环滚动</title>
<style>
#box{
height:240px;
width:300px;
margin:0 auto;
border:1px solid #0066FF;
overflow:hidden;
padding-bottom:20px;
}
#box li{
color:#333;
height:24px;
}
#box ul{
margin:0;
padding:0;
}
</style>
</head>
<body>
<p id="box">
<ul id="con1">
<li>脚本之家1</li>
<li>脚本之家2</li>
<li>脚本之家3</li>
<li>脚本之家4</li>
<li>脚本之家5</li>
<li>脚本之家6</li>
<li>脚本之家7</li>
<li>脚本之家8</li>
<li>脚本之家9</li>
</ul>
</p>
<script>
var area=document.getElementById("box");
area.innerHTML+=area.innerHTML;
var liHeight=24;
area.scrollTop=0;
var delay=2000;
var speed=50;
var time;
function starMove(){
area.scrollTop++;
time=setInterval("scrollUp()",speed);
}
function scrollUp(){
if(area.scrollTop%liHeight==0){
clearInterval(time);
setTimeout("starMove()",delay);
}else{
area.scrollTop++;
if(area.scrollTop>=area.offsetHeight/2){
area.scrollTop=0;
}
}
}
setTimeout("starMove()",delay);
</script>
</body>
</html>The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.
Related articles:
Detailed explanation of the four methods of event binding this in react
Solve the problem that lower version browsers do not support the import of es6
The above is the detailed content of How to achieve text intermittent cycle scrolling effect through JS. For more information, please follow other related articles on the PHP Chinese website!