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

javascript|控制|頁面

　 首先，當我移動滑鼠到這個指標上面時，頁面就會自動向上滾動，當移動滑鼠到指標下面時，頁面就會自動向下滾動。我們不得不感歎新技術帶來的神奇！它讓我們費了更少的力氣，完成同等的工作。但是，是否能在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標記定義一個層，從而可以在指令碼程式中對它進行控制-->
  <!--接著，給指標映像添加2個事件，當它們發生時，分別設定相應的操作狀態變數-->
  < DIV id=item >< A
  onmouseout=okscroll=false href="javascript:void(0)" >< IMG
  src="http://www.webjx.com/htmldata/2005-06-15/down.gif" border=0 >< /A >< A
   onmouseout=okscroll=false
  href="javascript:void(0)" >< IMG src="http://www.webjx.com/htmldata/2005-06-15/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！看了上面的代碼詳細解讀，你是否領會了其中的技巧？軟體真是無所不能，是嗎？