So erzielen Sie mit JS einen intermittierenden Text-Scroll-Effekt-js-Tutorial-php.cn

So erzielen Sie mit JS einen intermittierenden Text-Scroll-Effekt

亚连

Freigeben： 2018-06-05 17:50:44

Original

2480 Leute haben es durchsucht

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>

Nach dem Login kopieren

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

Verwendung von Vuex zur Realisierung der Speicherung und Vereinheitlichung des Anmeldestatus Der Anmeldestatus erlaubt kein Durchsuchen. Welche spezifischen Methoden gibt es?

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!