彈性效果網頁右側浮動框詳解

admin發表於2018-11-20
網頁

分享一段程式碼例項，它實現了網頁右側懸浮的框效果。

並且這個框具有彈性效果，並且固定在網頁的右側。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
body {
  height: 2000px;
}
#antzone {
  width: 200px;
  height: 200px;
  background: aquamarine;
  position: absolute;
  right: 0px;
  bottom: 0px;
}
</style>
<script type="text/javascript">
window.onload = function() {
  // 滾動事件
  window.onscroll = function() {
    //獲取div
    var odiv = document.getElementById("antzone");
    //相容scrolltop
    var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;
    //呼叫函式
    starmove((document.documentElement.clientHeight - odiv.offsetHeight) + scrolltop)
  }
  //定義一個計時器
  var timer = null;
 
  function starmove(itarget) {
    var odiv = document.getElementById('antzone');
    //開啟計時器前先關閉計時器
    clearInterval(timer);
    //開啟計時器
    timer = setInterval(function() {
      //定義speed（速度&步長）
      var speed = (itarget - odiv.offsetTop) / 6;
      //三目取整
      speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
      //判斷到沒到目標位置，到了就關閉計時器，沒到就繼續運動
      if (itarget == odiv.offsetTop) {
        clearInterval(timer);
      } else {
        odiv.style.top = odiv.offsetTop + speed + 'px';
      }
    }, 30);
  }
};
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

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

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
body {
  height: 2000px;
}

設定body的高度是2000px。

[CSS] 純文字檢視 複製程式碼
#antzone {
  width: 200px;
  height: 200px;
  background: aquamarine;
  position: absolute;
  right: 0px;
  bottom: 0px;
}

設定元素的高度和寬度背景色，絕對定位，元素位於網頁右下角。

[JavaScript] 純文字檢視 複製程式碼
window.onload = function() {
  //code
}

當文件內容完全載入完畢再去執行函式中的程式碼。

[JavaScript] 純文字檢視 複製程式碼
window.onscroll = function() {
  //code
}

註冊scroll事件處理函式，也就是拖動滾動條就會觸發此事件。

[JavaScript] 純文字檢視 複製程式碼
var odiv = document.getElementById("antzone");

獲取id屬性值為antzone的元素物件。

[JavaScript] 純文字檢視 複製程式碼
var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

採用了相容方式，獲取頁面向上滾動的尺寸。

[JavaScript] 純文字檢視 複製程式碼
starmove((document.documentElement.clientHeight - odiv.offsetHeight) + scrolltop)

呼叫starmove()函式，此函式的使用在下面會有介紹；引數值是是元素的top屬性值，能夠將其固定於網頁的底部。

[JavaScript] 純文字檢視 複製程式碼
var timer = null;

宣告一個變數並賦值為null，用來儲存定時器函式的標識。

[JavaScript] 純文字檢視 複製程式碼
function starmove(itarget) {
  //code
}

此函式實現了緩衝運動效果，引數一個目標位置。

[JavaScript] 純文字檢視 複製程式碼
var odiv = document.getElementById('antzone');

獲取指定的元素物件。

[JavaScript] 純文字檢視 複製程式碼
clearInterval(timer);

停止上一次定時器函式，防止重複拖動滾動條導致定時器疊加的問題。

[JavaScript] 純文字檢視 複製程式碼
timer = setInterval(function() {
  //code
}，30)

每隔30毫秒執行一次定時器函式。

[JavaScript] 純文字檢視 複製程式碼
var speed = (itarget - odiv.offsetTop) / 6;

計算出一個速度，隨著兩者之差越來越小，那麼這個速度就越來越小。

[JavaScript] 純文字檢視 複製程式碼
speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

將速度去整數，個人感覺速度直接等於Math.ceil(speed)即可，還有必要來個三目運算子嗎。

[JavaScript] 純文字檢視 複製程式碼
if (itarget == odiv.offsetTop) {
  clearInterval(timer);
} else {
  odiv.style.top = odiv.offsetTop + speed + 'px';
}

如果到達目的地，也就是網頁底部，那麼就停止定時器函式。

否則就繼續設定元素的top屬性值。

二.相關閱讀:

（1）.onscroll事件可以參閱JavaScript scroll事件一章節。

（2）.scrollTop可以參閱JavaScript scrollTop一章節。

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

（4）.offsetHeight可以參閱JavaScript offsetHeight一章節。

（5）.setInterval()可以參閱window.setInterval()一章節。

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

（7）.Math.floor()可以參閱javascript Math.floor()一章節。

相關文章