文字滚动JS代码

雨点打透心脏的1/2处 2022-08-03 05:15 158阅读 0赞

文字滚动特效，还是比较简单的只要弄明白远离，主要是定时器的使用，今天在慕课上看到一个比较好的，滚动好写只要实现scrollTop++就可以，难点在于怎么样实现无限滚动，要理解两个属性就是scrollTop和  
scrollHeight  
![这里写图片描述][20150801110515310]  
我们先复制一个ul列表和第一个列表一模一样，之后我们当第二个ul列表出现下面这样的情况时，将scrollTop变为0  
![这里写图片描述][20150801111058355]  
这样也就是area.scrollTop=area.scrollHeight/2  
我们将 area.scrollTop变为0这样就可以进行下一次循环了  
**接下来是慕课网上的源码实例（无缝隙滚动）**

<div id="moocBox">
 <ul id="con1">
 <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a>2013-09-18</li>
 <li><a href="#">2.tab页面切换效果（案例）</a>2013-10-09</li>
 <li><a href="#">3.圆角水晶按钮制作（案例）</a>2013-10-21</li>
 <li><a href="#">4.HTML+CSS基础课程(系列)</a>2013-11-01</li>
 <li><a href="#">5.分页页码制作（案例）</a>2013-11-06</li>
 <li><a href="#">6.导航条菜单的制作（案例）</a>2013-11-08</li>
 <li><a href="#">7.信息列表制作(案例)</a>2013-11-15</li>
 <li><a href="#">8.下拉菜单制作(案例)</a>2013-11-22</li>
 <li><a href="#">9.如何实现“新手引导”效果</a>2013-12-06</li>
 </ul>
 <ul id="con2">
 </ul>
 </div>

还有一种就是间歇性滚动，道理一样很简单，每次滚动多少高度，就暂停一会，暂停用什么呢？  
想象setTimeout可以暂停一段时间执行一段函数，也就是说，我们把执行setInterval的函数封装起来放在setTimeout中就可以了

[20150801110515310]: /images/20220731/40957d1d2c4d43d697bdf6c5a82335a5.png
[20150801111058355]: /images/20220731/aea1d7bc9f5c4496904fb6f8e6487433.png