滚屏特效之基础篇：  
    将下面这段代码放入你网页的末尾（注意不能是开头，那样就看不到效果了）：

     〈SCRIPT language="JavaScript"〉
      window.scroll(0,100);
     〈/SCRIPT>
      
     如果这个网页中出现滚动条的话，那么打开时你就会发现：滚动条不像平时处于最顶端，而是距顶端有一小段的距离。这就是要实现滚屏的基础：用window对象的scroll方法改变滚动条的位置。其中的第一个参数为水平滚动条左端的位置(单位px)，第二个为垂直滚动条顶端的位置(单位px)。
      
     如果我们把这两个参数有规则的动态改变，那不就能实现滚屏了吗？比如使用简单的
    FOR 循环，把下面这段代码加到网页的最后：

     〈SCRIPT language="JavaScript"〉
      for (I=1; I<=1000; I++){
       window.scroll(0,I); 
     
     //将 for 循环中的 I 的值代入scroll 方法的第二个参数中来改变垂直滚动条的位置
     
      }
     〈/SCRIPT>
      
    看到了吗？滚动条是不是在动。由于我们只需要网页的垂直滚动，因此就只改变第二个即垂直滚动条的参数，而将第一个参数设为0。

    
    滚屏特效之进阶篇：

    上面的代码虽然能够实现滚屏，但是速度好像太快了点，我可不是能够一目十行的人:)。那就们就需对上面的代码进行改进：
     
      〈SCRIPT language="JavaScript"〉
      var timer;
      var y = 0;
      
      //定义一个滚屏的函数
      
      function scrollwindow(){
       window.scroll(0,y);
       y++;
       timer=setTimeout("scrollwindow()", 30); 
      
      //每隔30毫秒执行一次 scrollwindow()函数，以此来实现参数 y 的递增
      
      }
      〈/SCRIPT>
      
    这段代码就可以放到网页的任何位置了，不过建议放在和 之间。再用 替换 。这次是不是慢多了呢？而且你可以将timer=setTimeout("scrollwindow()", 30) 中的30换成其它数字，就能改变速度了，数字越小速度越快。

    滚屏特效之高级篇：

    速度我们是能够控制了，而且无论多长的网页都能够从头到尾“将滚屏进行到底”。但是您发觉没有？就是一进入网页就立即开始滚动，这样就可能错过网页项端的精彩内容哦。还有就是滚屏中或滚屏后我们都不能改变滚动条的位置，这就不像在看网页了，到有点像看电视。我们还应当设计滚动：

      〈SCRIPT language="JavaScript"〉
      var currentpos,timer;
      
      //开始滚动函数，执行后网页开始滚动
      
      function initialize(){
      timer = setTimeout("scrollwindow()",30);
      
      //每隔30毫秒执行一次 scrollwindow() 函数
      
      }
      
      //停止滚动函数，执行该函数后停止网页滚动
      
      function stopscroll(){
      clearInterval(timer);
      
      //清除setTimeout函数的句柄 timer，停止执行scrollwindow() 函数
      
      }
      function scrollwindow(){
      currentpos = document.body.scrollTop; 
      
      //得到当前滚动条顶端位置，请注意 scrollTop 的大小写
      
      window.scroll(0,++currentpos);   
      
      //将currentpos累加的值赋给scroll方法的第二个参数
      
      if (currentpos != document.body.scrollTop){
      stopscroll();
     
      //如果 currentpos的值不等于当前滚动条的位置，则停止网页滚动
     
      }else{
      initialize();
     
      //否则继续网页的滚动
       }
      }
      document.ondblclick = initialize;
     
      //双击左键执行initialize,网页开始滚动,注意这里不同于一般调动函数的方法，这里函数名后不能有括号
     
      document.onmousedown = stopscroll;
     
      //单击左键停止网页的滚动
     
      〈/SCRIPT>
      
     这段代码就能实现，浏览者通过双击鼠标来开始滚屏，并通过单击来停止，而且滚动过程中，您可以随意拖动滚动条。当然了，您也可以单击某个按钮来开始滚屏，将这句加入网页适当位置： 就能实现。

    滚屏特效之终极篇：

        每个人的浏览速度都不同，我们到底将滚屏的速度设置成多快好呢？还是留给浏览者自己决定吧。用过“ReadBook”的朋友都知道，它的鼠标控制的无级变速滚屏非常人性化。其实我们网页中也能实现：
      
      〈SCRIPT language="JavaScript"〉
      var mousey, currentpos, timer;
      function currentmousey() {
       mousey = window.event.y;

      //得到鼠标在网页中的Y坐标，请注意 event 的大小写

      }
      function initialize(){
      timer = setTimeout("scrollwindow()",mousey);

      //用鼠标在网页中的Y坐标来决定执行scrollwindow()函数的频率，从而动态改变网页的滚动速度

      }
      function stopscroll(){
       clearInterval(timer);
      }
      function scrollwindow(){
      currentpos = document.body.scrollTop;
      window.scroll(0,++currentpos);
      if (currentpos != document.body.scrollTop){
      stopscroll();
      }else{
      initialize();
      }
      }
      document.ondblclick = initialize;
      document.onmousedown = stopscroll;
      document.onmousemove = currentmousey; 

      //当在网页上触了鼠标的移动事件，就运行currentmousey函数

      〈/SCRIPT>
       双击然后移动鼠标试试，当鼠标指针约靠近屏幕上端滚动速度就越快，反之则越慢。

【发表评论】【打印此文】【关闭窗口】【点击数： 】