Maison > Article > interface Web > Comment obtenir un effet de défilement de cycle intermittent de texte via JS
Comment obtenir un effet de défilement de cycle intermittent de texte via JS
- 亚连original
- 2018-06-05 17:50:442396parcourir
Cet article présente principalement l'effet de défilement cyclique intermittent du texte implémenté par JS, impliquant des techniques liées au javascript combinées au déclenchement de la fonction temporelle pour obtenir un fonctionnement dynamique des éléments de la page. Les amis dans le besoin peuvent s'y référer
Le. les exemples dans cet article décrivent l'effet de défilement de cycle intermittent du texte réalisé par JS. Je le partage avec vous pour votre référence. Les détails sont les suivants :
Le code spécifique est le suivant :
<!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>Ce qui précède est ce que j'ai compilé pour vous, j'espère que ce sera le cas. vous sera utile à l'avenir.
Articles associés :
Explication détaillée des quatre méthodes de liaison d'événements dans React
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!