神奇的頁面滾動控制

發(fā)布時間：2008-08-26 閱讀數(shù)：次來源：網(wǎng)樂原科技

首先，當(dāng)我移動鼠標(biāo)到這個指示器上面時，頁面就會自動向上滾動，當(dāng)移動鼠標(biāo)到指示器下面時，頁面就會自動向下滾動。我們不得不感嘆新技術(shù)帶來的神奇！它讓我們費了更少的力氣，完成同等的工作。但是，是否能在HTML頁面上制作這樣一個指示器呢？答案當(dāng)然是：完全可以！請跟我來。　

 　　實現(xiàn)思路

 　　 1、首先，準(zhǔn)備好2個圖形文件，一個代表向上，另一個代表向下。

 　　 2、然后，進(jìn)行頁面布局，我們可以將這個指示器圖標(biāo)放在你想要的任意位置，這里我們假設(shè)它位于當(dāng)前窗口的右下部。

 　　 3、針對不同的瀏覽器，設(shè)置好相應(yīng)的對象變量。這里，我們只考慮當(dāng)前2種主流瀏覽器：IE和Netscape。

 　　 4、對2個指示器圖標(biāo)，分別設(shè)置onmouseover與onmouseout事件處理，生成當(dāng)前操作狀態(tài)。然后據(jù)此執(zhí)行定時滾動函數(shù)，實現(xiàn)頁面的滾動效果。

 　　代碼詳解

 < HTML >< HEAD >
 < META http-equiv=Content-Type content="text/html; charset=gb2312" >
 < STYLE type=text/css >
 < !--
 /*設(shè)置一個樣式
 #item { LEFT: 0px; VISIBILITY: hidden; POSITION: absolute }
 -- >
 < /STYLE >

 < SCRIPT language=JavaScript >
 < !--

 //設(shè)置變量
 //設(shè)置變量isNS，判別瀏覽器類型。對于NetScape瀏覽器，document.layers返回true值
 var isNS=(document.layers);
 //設(shè)置引用對象時的變量名稱
 //對于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';

 //設(shè)置其他變量：w_x與w_y：坐標(biāo)值，okscroll：滾動與否，godown：是否向下
 var w_x, w_y, item, okscroll=false, godown;

 function init(){
 //初始化運行函數(shù)

 //將引用的對象賦值給item變量，這樣，在隨后的對象賦值操作中，可以簡化代碼的編寫，并保持兼容性
 //注意：這是一個非常好的編程習(xí)慣
 item=eval('document.'+_all+'item'+_style);
 //取得當(dāng)前窗口的尺寸大小等參數(shù)，并移動指示器到屏幕的右下角
 getwindowsize();

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

 //啟動滾動判斷定時函數(shù)，監(jiān)測操作動作
 scrollpage();
 }

 function getwindowsize() {
 //取得當(dāng)前窗口大小參數(shù)，并根據(jù)這些數(shù)值移動指示器到屏幕右下角
 //注意：當(dāng)用鼠標(biāo)改變窗口的大小時，要根據(jù)當(dāng)前最新的窗口長寬參數(shù)設(shè)置指示器的位置。否則，就可能看不到停留在
 //原來位置的指示器了。

 //對于IE，document.body.clientWidth表示當(dāng)前窗口的寬度，document.body.clientHeight表示高度，單位是
 //象素px。如果是Ns瀏覽器，對應(yīng)為window.innerWidth和window.innerHeight。
 w_x=(isNS)? window.innerWidth-5 : document.body.clientWidth;
 w_y=(isNS)? window.innerHeight : document.body.clientHeight;

 //接著，設(shè)置代表指示器區(qū)域的層的寬度與高度。
 (isNS)? item.clip.width=42: item.width=42;
 (isNS)? item.clip.height=20 : item.height=20;

 //根據(jù)上面設(shè)置的參數(shù)，移動指示器到相應(yīng)位置
 moveitem();
 }

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

 //對于NS瀏覽器
 if (isNS) {
 item.moveTo((pageXOffset+w_x-70),(w_y+pageYOffset-50))
 }else{
 //如果是IE，直接給層的2個屬性賦值：pixelLeft代表X坐標(biāo)，pixelTop代表Y坐標(biāo)
 //注意：當(dāng)屏幕發(fā)生滾動時，document.body.scrollLeft與document.body.scrollTop分別代表
 //滾動的橫向距離與縱向距離。而w_x與w_y分別表示了指示器在當(dāng)前窗口的相對坐標(biāo)位置，
 //所以，要對2者進(jìn)行相加操作，從而得到指示器的絕對坐標(biāo)位置。
 item.pixelLeft=document.body.scrollLeft+w_x-70;
 item.pixelTop=w_y+document.body.scrollTop-50;
 }
 }

 function resizeNS() {
 //對于Ns瀏覽器，當(dāng)窗口大小變化時，執(zhí)行定時操作

 //setTimeout函數(shù)設(shè)置了定時執(zhí)行的操作，這里表示：每400毫秒執(zhí)行document.location.reload()操作
 setTimeout('document.location.reload()',400);
 }