网址大全 | 文章大全 | 精选文摘 | 桌面壁纸 | 站长资源 | 在线手册 | 幽默笑话 | 天气预报 | FLASH    | 歇后语
便民查询 | 成语词典 | 五笔字典 | 新华字典 | 周公解梦 | 在线算命 | 生日密码 | 网络电台 | 网站留言 | 许愿墙
您的位置:首页 >> 文章大全 > 网页制作 > JavaScript
站内搜索:
网页制作专栏
基础篇网页三剑客
HTML/CSS服务器
JavaScriptFrontPage
DHTML配色篇
相关文章
·js判断时间
·window.open的例子和...
·从javascript语言本身...
·Window.Open详解
·网页自动刷新代码
百度搜索 全网 本站
本类排行 more>>
·网页滚屏特效全攻略
·网页自动刷新代码
·JavaScript的相关问题...
·JavaScript实用的一些...
·JS实现浏览器菜单命令...
·js几种常用的表单输入...
·Window.Open详解
·脚本代码:实例解析J...
·js判断时间
·javascript加密解密终...
最新文章 more>>
·《网站配色方案》系列...
·《网站配色方案》系列...
·岳飞传的流程攻略
·百度漂亮 但Google更...
·个人站长的胜利 新网...
·搜搜问问抢不了百度知...
·视频网站接连败退 营...
·曹操传 杨家将传奇 官...
·专家为股民支招:网络...
·优秀站长访谈:个人网...
网页滚屏特效全攻略

[ 作者:佚名 来源:网络 点击数:170 加入时间:2006-11-29 ]

【双击左键自动滚屏】【图片上滚动鼠标滚轮变焦图片】 【字体:放大 正常 缩小】 字体颜色:
便民查询  中华五千年  世界五千年  万年历  天气预报  周公解梦  脑筋急转弯  在线翻译  电信话费查询

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

     〈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>
       双击然后移动鼠标试试,当鼠标指针约靠近屏幕上端滚动速度就越快,反之则越慢。

国家纸币  自考信息  度量转换  搜索引擎指南  城市经纬度  脑筋急转弯  各国资料  名言辞典  违章查询
·上一篇文章:Utf-8和Gb2312乱码问题
·下一篇文章:ASP原码加密工具介绍
百度搜索更多内容:网页滚屏特效全攻略
推荐文档】 【打印文档】 【返回页首】 【关闭窗口