How to achieve text intermittent cycle scrolling effect through JS-JS Tutorial-php.cn

How to achieve text intermittent cycle scrolling effect through JS

亚连

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

Original

2439 people have browsed it

This article mainly introduces the text intermittent cycle scrolling effect implemented by JS, involving JavaScript combined with time function timing triggering to achieve dynamic operation of page elements and related techniques. Friends in need can refer to the following

The examples of this article describe JS Realized text intermittent cycle scrolling effect. Share it with everyone for your reference, the details are as follows:

The specific code is as follows:

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

Copy after login

The above is what I compiled for everyone, I hope it will be helpful to everyone in the future.

Detailed explanation of the four methods of event binding this in react

Use vuex to realize the storage and future of login status Browsing is not allowed in logged-in status, what are the specific methods?

Solve the problem that lower version browsers do not support the import of es6

The above is the detailed content of How to achieve text intermittent cycle scrolling effect through JS. For more information, please follow other related articles on the PHP Chinese website!