JS 如何实现文字间歇循环滚动效果详解

why 592 2025-07-23 21:31:27

这次给大家带来JS文字间歇循环滚动效果怎么实现,JS文字间歇循环滚动效果实现的注意事项有哪些,下面就是实战案例,一起来看一下。

具体代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

nbsp;html>

 

 

<meta><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><p>

  </p>

  •     

  • PHP1

  •     

  • PHP2

  •     

  • PHP3

  •     

  • PHP4

  •     

  • PHP5

  •     

  • PHP6

  •     

  • PHP7

  •     

  • PHP8

  •     

  • PHP9

  •   

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

相信看了本文案例你已经掌握了方法。


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:怎么修改微信小程序名称?
下一篇:探索AI开发小程序的应用与源码提升效率的秘密
相关文章