suchen

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

JS implementiert intermittierendes Scrollen von Text

小云云
小云云Original
2018-02-22 09:38:502284Durchsuche

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>

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!

JavaScript jquery css html 循环 JS
Stellungnahme：
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
Vorheriger Artikel：Vier verbindliche Formen davon in Javascript-FunktionenNächster Artikel：Vier verbindliche Formen davon in Javascript-Funktionen

In Verbindung stehende Artikel

Mehr sehen