Javascript实现神奇的页面滚动控制

时间:2010-03-30 16:50:57  来源:第二电脑网  作者:第二电脑网

  第二电脑网导读:全可以!请跟我来。   实现思路      1、首先,准备好2个图形文件,一个代表向上,另一个代表向下。      2、然后,进行页面布局,我们可以将这个指示器图标放在你想要的任意位置,这里我们假设它位于当前窗口的右下部。       3、针对不同的浏览器,设置好相应的对象变量。...
  正文:首先,当我移动鼠标到这个指示器上面时,页面就会自动向上滚动,当移动鼠标到指示器下面时,页面就会自动向下滚动。我们不得不感叹新技术带来的神奇!它让我们费了更少的力气,完成同等的工作。但是,是否能在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) { "Javascript实现神奇的页面滚动控制"由第二电脑网原创提供,转载请注明:http://www.002pc.com/master/College/Programming/JavaScript/13407.html


关键字:

关于《Javascript实现神奇的页面滚动控制》文章的评论

站内搜索: 高级搜索

热门搜索: Windows style 系统 tr IP QQ CPU 安装 function 注册 if td