js具有跟隨彈性效果的網頁右下角視窗程式碼

admin發表於2017-04-08
JS網頁

本章節分享一段程式碼例項，它實現了網頁右下角視窗彈性跟隨作用。

下面就給出程式碼，並且進行以下詳細的分析，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
html,body{
height:2000px;
}
#antzone{
  width:200px;
  height:150px;
  background:#c0c0c0;
}
</style>
<script>
function scroll(p){
  var d = document,
      w = window,
      o = d.getElementById(p.id),
      ie6 = /msie 6/i.test(navigator.userAgent);
  if(o){
    o.style.cssText +=";position:"
    +(p.f&&!ie6?'fixed':'absolute')
    +";"+(p.l?'left':"right")+":0;"
    +(p.t!=undefined?'top:'+p.t+'px':'bottom:0');
    if(!p.f||ie6){
      -function(){
        var t = 500,
            st = d.documentElement.scrollTop||d.body.scrollTop,
            c;
        c = st - o.offsetTop
        + (p.t!=undefined?p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight);
        c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px',t=10);
        setTimeout(arguments.callee,t)
      }()
    }
  }
}
 
window.onload=function(){
  scroll({
    id:'antzone'
  })
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function scroll(p){}，此函式實現了各種準備工作，引數是一個物件,根據下面的程式碼可以推斷這個物件具有多個屬性:

id:浮動物件的id。

r:右邊距（視窗右邊距，不寫為靠左浮動）。

l:左邊距（距離父級物件的左邊距） “r”和“l”只能有其中一個引數。

t:上邊距（預設貼著底邊，0是貼著頂邊）。 

f:1表示固定（不寫或者0表示滾動）。 

（2）.var d = document，將document物件引用賦值給變數d，是不是可以減少很多程式碼量。

（3）.w = window，和上面是同樣的道理。

（4）.o = d.getElementById(p.id)，獲取指定id值的元素物件。

（5）.ie6 = /msie 6/i.test(navigator.userAgent)，返回一個布林值，用來說明當前瀏覽器是不是IE6瀏覽器。

（6）.if(o){}，判斷物件是否存在。

（7）.o.style.cssText +=";position:"

  +(p.f&&!ie6?'fixed':'absolute')

  +";"+(p.l?'left':"right")+":0;"

  +(p.t!=undefined?'top:'+p.t+'px':'bottom:0');上面的程式碼是根據條件組合成一個css語句。

;position前面加分好是為了防止css+o.style.cssText這樣形式連線的時候會導致錯誤的情況。

(p.f&&!ie6?'fixed':'absolute')這一句表示，如果要將視窗固定且不是ie6瀏覽器，那麼定位方式是fixed，否則就使用absolute.(p.l?'left':"right")+":0;"判斷視窗是在左邊還是右邊，並設定left或者right值為0

(p.t!=undefined?'top:'+p.t+'px':'bottom:0')，是否規定視窗的top屬性值，並進行相應的設定。

（8）.if(!p.f||ie6)，判斷是否不是或者或者是IE6.

（9）.-function(){}()，這是一個匿名自執行函式，我們最為常見的是(function(){})()這種形式，具體參閱相關閱讀。

（10）.var t = 500，生命一個變數並賦值為500，作為定時器函式延遲執行的時間。

（11）.st = d.documentElement.scrollTop||d.body.scrollTop，獲取向上滾動的尺寸，這麼寫是為了相容性。

（12）.c = st - o.offsetTop+ (p.t!=undefined?p.t : (w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight)，此段程式碼獲取的最終結果就是元素底部距離視窗底部的距離。

（13）.c!=0&&(o.style.top = o.offsetTop + Math.ceil(Math.abs(c)/10)*(c<0?-1:1) + 'px',t=10)，這個語句其實使用&&運算子實現一個條件判斷，如果c!=0，也就是div還沒有滑到視窗底部，那麼執行&&後面的程式碼，不斷的調整top屬性值，最終能夠實現div能夠滑到視窗的底部。並且將t的值設定為10，至於為什麼後面會介紹。

（14）.setTimeout(arguments.callee,t)，整個程式碼是效率不夠高的，因為定時器函式始終執行，當div元素滑到底部的時候，t的值為500，也就是時間間隔邊長，能夠那麼定時器函式的執行頻率也就降低了，那麼瀏覽器壓力就降低了，當拖動滾動條的時候，那麼就將其調整為10，開始真正的滑動操作。

二.相關閱讀:

（1）.test()可以參閱正規表示式test()函式一章節。

（2）.cssText可以參閱style.cssText一章節。

（3）.d.documentElement.scrollTop||d.body.scrollTop可以參閱document.documentElement.scrollTop瀏覽器相容一章節。

（4）.offsetTop可以參閱js offsetTop一章節。

（5）.小括號的作用可以參閱js中小括號()的用法詳解一章節。

（6）.innerHeight可以參閱innerheight一章節。

（7）.clientHeight可以參閱clientHeight一章節。

（8）.offsetHeight可以參閱js offsetHeight一章節。

（9）.Math.abs()可以參閱javascript Math.abs()一章節。

（10）.Math.ceil()可以參閱javascript Math.ceil()一章節。

（11）.setTimeout()可以參閱setTimeout()一章節。

相關文章