首先,当我移动鼠标到这个指示器上面时,页面就会自动向上滚动,当移动鼠标到指示器下面时,页面就会自动向下滚动。我们不得不感叹新技术带来的神奇!它让我们费了更少的力气,完成同等的工作。但是,是否能在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); } function scrollpage() { //页面滚动控制函数 status = ''; //okscroll与godown都是滚动状态标志,其值由指示器层的onmouseover与onmouseout2个事件控制。 //window.scrollBy(x,y)控制页面滚动,x、y分别表示横向与纵向滚动的距离,单位是象素px。 //当设置y值更大时,每次滚动的距离也将更大。 if (okscroll) { if (godown) { (isNS)? window.scrollBy(0,4) : window.scrollBy(0,4) ; } else { (isNS)? window.scrollBy(0,-4) : window.scrollBy(0,-4) ; } } //页面滚动后,指示器已不再停留在我们期待的位置。所以,要再次执行移动函数移动它到屏幕的右下角。 //这样,看起来好像它总是在那里 ;-) moveitem(); //设置滚动函数定时执行。这里的时间,表示了监测用户操作状态的周期,越小表示越精确,但程序也将 //更“忙”。设置得过于长,就会产生慢动作的延迟效果,好像计算机很迟钝,当我们将鼠标点到向下指示器 //时,屏幕并没有马上做出反应,而是等了一段时间,才向下滚动 ;-( //根据你的需要,并进行测试,设置这个数值。 setTimeout('scrollpage()', 158); } //页面加载后,启动相关脚本函数 //设置页面加载后,首先启动init函数 window.onload=init; //设置当窗口大小发生变换时启动的函数 (isNS) ? window.onresize=resizeNS : window.onresize=getwindowsize ; // End -- > < /SCRIPT > < BODY > < DIV id=item >< A onmouseover="okscroll=true; godown=true;" onmouseout=okscroll=false href="javascript:void(0)" >< IMG src="down.gif" border=0 >< /A >< A onmouseover="okscroll=true; godown=false;" onmouseout=okscroll=false href="javascript:void(0)" >< IMG src="up.gif" border=0 >< /A > < /DIV > < P > < CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆ < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >用JavaScript制作页面滚动效果 < P >◆◆◆◆◆ End Here ◆◆◆◆◆ < P >< /CENTER > < P >< /P >< /BODY >< /HTML > 演示效果 OK!看了上面的代码详细解读,你是否领会了其中的技巧?软件真是无所不能,是吗? |
|小黑屋|最新主题|手机版|微赢网络技术论坛 ( 苏ICP备08020429号 )
GMT+8, 2024-9-29 23:31 , Processed in 0.263885 second(s), 12 queries , Gzip On, MemCache On.
Powered by Discuz! X3.5
© 2001-2023 Discuz! Team.