JS implements intermittent scrolling of text-JS Tutorial-php.cn

JS implements intermittent scrolling of text

小云云

Release： 2018-02-22 09:38:50

Original

2281 people have browsed it

This article mainly introduces the intermittent text cycle scrolling effect implemented by JS, which involves the techniques of javascript combined with time function timing triggering to achieve dynamic operation of page elements. Friends who need it can refer to it. I hope it can help everyone.

The specific code is as follows:

<!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>

Copy after login

Related recommendations:

html+css+javascript how to implement list circular scrolling

JS practical example of line-by-line text circular scrolling effect with pause

JQuery circular scrolling picture code_jquery

The above is the detailed content of JS implements intermittent scrolling of text. For more information, please follow other related articles on the PHP Chinese website!