cari

Rumah >hujung hadapan web >tutorial js >通过JS如何实现文字间歇循环滚动效果

通过JS如何实现文字间歇循环滚动效果

亚连
亚连asal
2018-06-05 17:50:442464semak imbas

这篇文章主要介绍了JS实现的文字间歇循环滚动效果,涉及javascript结合时间函数定时触发实现页面元素动态操作相关技巧,需要的朋友可以参考下

本文实例讲述了JS实现的文字间歇循环滚动效果。分享给大家供大家参考，具体如下：

具体代码如下：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详解react关于事件绑定this的四种方式

利用vuex实现登录状态的存储与未登录状态不允许浏览，具体有哪些方法？

解决低版本的浏览器不支持es6的import问题

Atas ialah kandungan terperinci 通过JS如何实现文字间歇循环滚动效果. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：如何实现vue2.0响应式（详细教程）Artikel seterusnya：详细讲解React中的refs（详细教程）

Artikel berkaitan

Lihat lagi