利用scrollTop制作间歇滚动效果

凉拌菜

这种例子在网上一搜就是一大把，但是对于我这种js菜鸟来说，编程逻辑才是我要掌握的东西。于是把做过的东西再记下来，再次理清一下思路。

循环滚动的原理
制作一个无缝向上滚动，我们所要利用的是scrollTop属性。一般的做法是把要滚动的内容A放在一个容器C里面。通过不停的改变scrollTop的值，从而得到滚动的效果，为了让滚动能够连续，我们还要复制一遍A，当A的复制品B超出C的可视野区域时，让scrollTop变回0，这样就造成一种循环滚动的假象。例图如下：

具体效果请看Demo

间歇滚动的思路
间歇滚动滚动视觉上给人的感觉就是，滚动一段距离，然后停顿一下，再接着滚动一段距离。
我们可以把动作拆分开来，写成不同的动作函数。
1.我们先把页面结构写好

复制代码运行代码编辑代码

1. <dl id="scrollBox" >
   
2. <dt>
   
3. <p>这是一条滚动公告</p>
   
4. <p>这是一条滚动公告2</p>
   
5. <p>这是一条滚动公告3</p>
   
6. <p>这是一条滚动公告4</p>
   
7. </dt>
   
8. <dd></dd>
   
9. </dl>

复制代码运行代码编辑代码

Powered by W3Cfuns.com

2.复制一遍dt：

复制代码运行代码编辑代码

1. var Marquee = function(id){
   
2. this.container = document.getElementById(id);
   
3. this.original = this.container.getElementsByTagName("dt")[0];
   
4. this.clone = this.container.getElementsByTagName("dd")[0];
   
5. this.scrolln=this.scrollCol=0;//在第四点来存储滚动距离
   
6. this.clone.innerHTML=this.original.innerHTML;//复制dt
   
7. this.container.scrollTop = 0;//复位scrollTop
   
8. }

复制代码运行代码编辑代码

Powered by W3Cfuns.com

3.让内容滚动20像素后停止：

复制代码运行代码编辑代码

1. this.rolling = function(){
   
2. this.container.scrollTop=this.scrolln;
   
3. if(this.scrolln==20){
   
4. return false；
   
5. }else{
   
6. this.scrolln +=1;
   
7. var o = this;
   
8. function m(){o.rolling();}
   
9. setTimeout(m,40);
   
10. };
    
11. };

复制代码运行代码编辑代码

Powered by W3Cfuns.com

4.把滚动的距离叠加起来，并且当scrollTop超过B的高度时，重置为0：

复制代码运行代码编辑代码

1. this.rolling = function(){
   
2. this.container.scrollTop=this.scrolln;
   
3. this.container.scrollTop=this.scrolln+this.scrollCol;
   
4. if(this.container.scrollTop-this.clone.offsetHeight>=0){
   
5. this.container.scrollTop=0;
   
6. }//scrollTop超过B的高度时，重置为0：
   
7. if(this.scrolln==20){
   
8. return this.setroll();//停顿两秒再启动滚动函数
   
9. }else{
   
10. this.scrolln +=1;
    
11. var o = this;
    
12. function m(){o.rolling();}
    
13. setTimeout(m,40);
    
14. };
    
15. };
    
16. this.setroll=function(){
    
17. this.scrollCol = this.container.scrollTop;//保存已滚动的距离
    
18. this.scrolln=0;//清零 再次使用
    
19. var o=this;
    
20. function m(){o.rolling()};
    
21. setTimeout(m,2000);
    
22. };

复制代码运行代码编辑代码

Powered by W3Cfuns.com

Tean

复制代码运行代码编辑代码

1. <dl id="scrollBox" >
   
2. 
   
3. <dt>
   
4. 
   
5. <p>这是一条滚动公告</p>
   
6. 
   
7. <p>这是一条滚动公告2</p>
   
8. <p>这是一条滚动公告3</p>
   
9. <p>这是一条滚动公告4</p>
   
10. </dt>
    
11. 
    
12. <dd></dd>
    
13. 
    
14. </dl>

复制代码运行代码编辑代码

Powered by W3Cfuns.com

为什么写到<dt>的<p></p>呢？为什么不把写到<dd></dd>里面呢，

凉拌菜

Tean 发表于 2012-2-7 09:16
为什么写到的呢？为什么不把写到里面呢，

方便复制
this.original = this.container.getElementsByTagName("dt")[0];

this.clone = this.container.getElementsByTagName("dd")[0];

占据你１生﹠

原因一个效果都这么难啊。。

521fengxiao

我自己也写了一个 是向左滚动的 可就是不循环呢 是什么原因?