垂直滚动特效

听老歌

垂直滚动特效

1. <div id="dome">
   
2. <div id="dome1">
   
3.     </div>
   
4.     <div id="dome2"></div>
   
5. </div>
   
6. <script type="text/javascript">
   
7.     var speed=10;  //设置向上滚动速度
   
8. var dome=document.getElementById("dome");
   
9.    var dome1=document.getElementById("dome1");
   
10.    var dome2=document.getElementById("dome2");
    
11.      function moveTop(){
    
12.    dome2.innerHTML=dome1.innerHTML //复制dome1为dome2
    
13.    if(dome2.offsetTop-dome.scrollTop<=0)   //当滚动至dome1与dome2交界时
    
14.    dome.scrollTop-=dome1.offsetHeight      //dome跳到最顶端
    
15.    else{
    
16.    dome.scrollTop++
    
17.    }
    
18.    }
    
19.     var MyMar=setInterval(moveTop,speed) //设置定时器
    
20.    dome.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
    
21.    dome.onmouseout=function() {MyMar=setInterval(moveTop,speed)}//鼠标移开时重设定时器，继续滚动
    
22.        </script>

复制代码

scrollTop:
    有些情况下,“元素中内容”的高度会超过“元素本身”的高度,这时候我们有时就会用到scrollTop初始状态下，“内层元素的上边界”和“外层元素的上边界”重合，没有任何内容超过“外层元素的上边界”，此时scrollTop属性的值为0。当向下拖动滚动条时，超过“外层元素的上边界”的内容会逐渐增多，scrollTop值就等于这些超出的部分。
offsetTop:
    当前对象到其上级层顶部的距离,不能对其进行赋值.设置对象到页面顶部的距离请用style.top属性.
offsetHeight:
    当前元素的高度.

小鬼萌萌控

谢谢分享