Maison > Article > Applet WeChat > Comment obtenir un effet de défilement circulaire intermittent du texte JS
Comment obtenir un effet de défilement circulaire intermittent du texte JS
- php中世界最好的语言original
- 2018-03-17 15:38:492331parcourir
Cette fois, je vais vous montrer comment obtenir l'effet de défilement cyclique intermittent du texte JS. Quelles sont les précautions pour réaliser l'effet de défilement cyclique intermittent du texte JS. Voici des cas pratiques, prenons un. regarder.
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>PHP1</li>
<li>PHP2</li>
<li>PHP3</li>
<li>PHP4</li>
<li>PHP5</li>
<li>PHP6</li>
<li>PHP7</li>
<li>PHP8</li>
<li>PHP9</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>
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur. le site PHP chinois !
Lecture recommandée :
Comment utiliser la fonction d'encapsulation de l'effet de tampon de mouvement JS
Explication détaillée du chargement asynchrone de JavaScript
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!