Javascript實現神奇的頁面滾動控制_自動測試腳本語言

Javascript實現神奇的頁面滾動控制

發表于：2007-06-21來源：作者：點擊數：標簽：

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

　首先，當我移動鼠標到這個指示器上面時，頁面就會自動向上滾動，當移動鼠標到指示器下面時，頁面就會自動向下滾動。我們不得不感嘆新技術帶來的神奇！它讓我們費了更少的力氣，完成同等的工作。但是，是否能在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 >
 

 
 < CENTER >◆◆◆◆◆ Begin From Here ◆◆◆◆◆
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 用JavaScript制作頁面滾動效果
 ◆◆◆◆◆ End Here ◆◆◆◆◆
 < /CENTER >
 < /BODY >< /HTML >
 　　演示效果

 　　 OK！看了上面的代碼詳細解讀，你是否領會了其中的技巧？軟件真是無所不能，是嗎？

原文轉自：http://www.kjueaiud.com

軟件測試 > 測試開發技術 > 軟件測試開發語言 > 自動測試腳本語言 >