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

來源:互聯網
上載者:User
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!看了上面的代碼詳細解讀,你是否領會了其中的技巧?軟體真是無所不能,是嗎?



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。