神奇的页面滚动控制（一）_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

神奇的页面滚动控制（一）

作者：闵涛文章来源：闵涛的学习笔记点击数：606 更新时间：2009/4/23 11:31:00

     作者 : 甘冀平


  　　首先，当我移动鼠标到这个指示器上面时，页面就会自动向上滚动，当移动鼠标到指示器下面时，页面就会自动向下滚动。我们不得不感叹新技术带来的神奇！它让我们费了更少的力气，完成同等的工作。但是，是否能在HTML页面上制作这样一个指示器呢？答案当然是：完全可以！请跟我来。

  　　

  　　实现思路

  　　 1、首先，准备好2个图形文件，一个代表向上，另一个代表向下。

  　　

  　　 2、然后，进行页面布局，我们可以将这个指示器图标放在你想要的任意位置，这里我们假设它位于当前窗口的右下部。

  　　 3、针对不同的浏览器，设置好相应的对象变量。这里，我们只考虑当前2种主流浏览器：IE和Netscape。

  　　 4、对2个指示器图标，分别设置onmouseover与onmouseout事件处理，生成当前操作状态。然后据此执行定时滚动函数，实现页面的滚动效果。

  　　代码详解

  < HTML >< HEAD >
  < META http-equiv=Content-Type content="text/html; charset=gb2312" >
  < STYLE type=text/css >
  < !--
  /*设置一个样式
  #item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute }
  -- >
  < /STYLE >

  < SCRIPT language=JavaScript >
  < !--

  //设置变量
  //设置变量isNS，判别浏览器类型。对于NetScape浏览器，document.layers返回true值
  var isNS=(document.layers);
  //设置引用对象时的变量名称
  //对于IE浏览器，可见控制的引用值为document.all.object.style.visibility=visible
  //对于Ns浏览器，可见控制的引用值为document.object.visibility=show
  var _all=(isNS)? '' : 'all.' ;
  var _style=(isNS)? '' : '.style' ;
  var _visible=(isNS)? 'show' : 'visible';

  //设置其他变量：w_x与w_y：坐标值，okscroll：滚动与否，godown：是否向下
  var w_x, w_y, item, okscroll=false, godown;

  function init(){
  //初始化运行函数

  //将引用的对象赋值给item变量，这样，在随后的对象赋值操作中，可以简化代码的编写，并保持兼容性
  //注意：这是一个非常好的编程习惯
  item=eval('document.'+_all+'item'+_style);
  //取得当前窗口的尺寸大小等参数，并移动指示器到屏幕的右下角
  getwindowsize();

  //使指示器可见
  item.visibility=_visible;

  //启动滚动判断定时函数，监测操作动作
  scrollpage();
  }

  function getwindowsize() {
  //取得当前窗口大小参数，并根据这些数值移动指示器到屏幕右下角
  //注意：当用鼠标改变窗口的大小时，要根据当前最新的窗口长宽参数设置指示器的位置。否则，就可能看不到停留在
  //原来位置的指示器了。

  //对于IE，document.body.clientWidth表示当前窗口的宽度，document.body.clientHeight表示高度，单位是
  //象素px。如果是Ns浏览器，对应为window.innerWidth和window.innerHeight。
  w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
  w_y=(isNS)? window.innerHeight : document.body.clientHeight;

  //接着，设置代表指示器区域的层的宽度与高度。
  (isNS)? item.clip.width=42: item.width=42;
  (isNS)? item.clip.height=20 : item.height=20;

  //根据上面设置的参数，移动指示器到相应位置
  moveitem();
  }

  function moveitem() {
  //移动指示器

  //对于NS浏览器
  if (isNS) {
   item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
   }else{
   //如果是IE，直接给层的2个属性赋值：pixelLeft代表X坐标，pixelTop代表Y坐标
   //注意：当屏幕发生滚动时，document.body.scrollLeft与document.body.scrollTop分别代表
   //滚动的横向距离与纵向距离。而w_x与w_y分别表示了指示器在当前窗口的相对坐标位置，
   //所以，要对2者进行相加操作，从而得到指示器的绝对坐标位置。
   item.pixelLeft=document.body.scrollLeft+w_x-70;
   item.pixelTop=w_y+document.body.scrollTop-50;
   }
  }

  function resizeNS() {
  //对于Ns浏览器，当窗口大小变化时，执行定时操作

  //setTimeout函数设置了定时执行的操作，这里表示：每400毫秒执行document.location.reload()操作
  setTimeout('document.location.reload()',400);
  }

没有相关教程

教程录入：mintao 责任编辑：mintao

上一篇教程：神奇的页面滚动控制（二）

下一篇教程： Java技巧（一）：会变色的超链接

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……