Heim > Web-Frontend > js-Tutorial > JS implementiert intermittierendes Scrollen von Text

JS implementiert intermittierendes Scrollen von Text

小云云
Freigeben: 2018-02-22 09:38:50
Original
2283 Leute haben es durchsucht

Dieser Artikel stellt Ihnen hauptsächlich den von JS implementierten intermittierenden Textzyklus-Scrolleffekt vor, der die Techniken von Javascript in Kombination mit der Zeitfunktions-Timing-Auslösung umfasst, um einen dynamischen Betrieb von Seitenelementen zu erreichen kann dir helfen.

Der spezifische Code lautet wie folgt:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>  - 间歇循环滚动</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>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</li>
    <li>php中文网</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>
Nach dem Login kopieren

Verwandte Empfehlungen:

HTML+CSS+Javascript-Anleitung Implementieren Sie kreisförmiges Scrollen in Listen

JS-Praxisbeispiel für zeilenweisen Text, kreisförmiger Scroll-Effekt mit Pausen

JQuery kreisförmiges Scrollen von Bildcode_jquery

Das obige ist der detaillierte Inhalt vonJS implementiert intermittierendes Scrollen von Text. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage