In diesem Artikel wird hauptsächlich der von JS implementierte intermittierende Text-Scroll-Effekt vorgestellt, der Techniken im Zusammenhang mit Javascript in Kombination mit der Zeitfunktions-Timing-Auslösung umfasst, um einen dynamischen Betrieb von Seitenelementen zu erreichen.
Der Die Beispiele in diesem Artikel beschreiben, wie JS den intermittierenden Text-Scroll-Effekt realisiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der spezifische Code lautet wie folgt:
<!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>Das Obige habe ich für alle zusammengestellt, ich hoffe, es wird hilfreich sein alle in der Zukunft.
Verwandte Artikel:
Detaillierte Erläuterung der vier Methoden zur Ereignisbindung in React
Lösen Sie das Problem, dass Browser niedrigerer Versionen den Import von es6 nicht unterstützen
Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit JS einen intermittierenden Text-Scroll-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
