JavaScript側欄緩動分享選單詳解

admin發表於2018-12-30
JavaScript

本章節分享一段程式碼例項，它實現了簡單的側欄導航選單分享功能。

此程式碼具有緩動跟隨效果，這是比較人性化且動態功能，下面詳細介紹一下它的實現。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body{
  margin:0; 
  padding:0; 
  font:12px/1.5 arial; 
  height:2000px;
}
#antzone{
  width:100px; 
  height:200px; 
  line-height:200px;
  text-align:center; 
  border:1px solid #ccc;
  background:#f5f5f5; 
  position:absolute; 
  left:-100px; 
  top:0;
}
#antzone_tit{
  position:absolute; 
  right:-20px; 
  top:60px;
  width:20px; 
  height:60px; 
  padding:10px 0;
  background:#06c; 
  text-align:center;
  line-height:18px; 
  color:#fff;
}
</style>
<script>
window.onload = function(){
  var antzone = document.getElementById("antzone");
  antzone.onmouseover = function(){
    startrun(antzone,0,"left")
  }
  antzone.onmouseout = function(){
    startrun(antzone,-100,"left")
  }
  window.onscroll = window.onresize = function(){
    var scrtop=document.documentElement.scrollTop;
    var height=document.documentElement.clientHeight;
    var top = scrtop + (height - antzone.offsetHeight)/2;
    top = parseInt(top);
    startrun(antzone,top,"top")
  }
}
var timer = null
function startrun(obj,target,direction){
  clearInterval(timer);
  timer = setInterval(function(){
    var speed = 0;
    if(direction == "left"){
      speed = (target-obj.offsetLeft)/8;
      speed = speed>0?Math.ceil(speed):Math.floor(speed);
      if(obj.offsetLeft == target){
        clearInterval(timer);
      }
      else{
        obj.style.left = obj.offsetLeft + speed + "px";
      }
    }
    if(direction == "top"){
      speed = (target-obj.offsetTop)/8;
      speed = speed>0?Math.ceil(speed):Math.floor(speed);
      if(obj.offsetTop == target){
        clearInterval(timer);
      }
      else{
        obj.style.top = obj.offsetTop + speed + "px";
      }
    }
  },30)
}
</script>
</head>
<body>
<div id="antzone">
 分享到內容
 <span id="antzone_tit">分享到</span>
</div>
</body>
</html>

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

一.實現原理:

分享選單之所以位置能夠移動是通過將antzone元素設定為絕對定位，然後調整它的left或者top值來實現。

"分享到"按鈕之所以能夠突出出來是因為將span元素設定為絕對定位，然後將right值設定為負數。由於父元素是採用絕對定位的，所以這個span元素的定位參考物件就是父元素。

拖動滾動條能夠實現跟隨效果是因為註冊了onscroll事件處理函式，然後進行調整相應的top值，並採用緩衝運動效果。

二.程式碼註釋:

（1）.window.onload = function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var antzone = document.getElementById("antzone")，獲取id屬性值為antzone的元素物件。

（3）.antzone.onmouseover = function(){

  startrun(antzone,0,"left")

}，為antzone元素註冊onmouseover事件處理函式。

（4）.antzone.onmouseout = function(){

  startrun(antzone,-100,"left")

}，為antzone元素註冊onmouseout事件處理函式。

（5）.window.onscroll = window.onresize = function(){}，為window註冊onscroll事件處理函式，也就是當拖動視窗滾動條的時候能夠觸發此事件。

（6）.var scrtop=document.documentElement.scrollTop，獲取向上滾動的距離。

（7）.var height=document.documentElement.clientHeight|，獲取客戶區的高度。

（8）.var top = scrtop + (height - antzone.offsetHeight)/2，這段程式碼的目的是將選單最終的停留位置設定為客戶區垂直居中。

（9）.top = parseInt(top)，轉換為整數，好像沒必要進行轉換。

（10）.startrun(antzone,top,"top")，呼叫此方法進行緩衝運動效果。

（11）.var timer = null，宣告一個變數，它將作為定時器函式的標誌。

（12）.function startrun(obj,target,direction)，此方法實現了緩衝運動定位效果，第一個引數是要定位的元素，這裡也就是選單，第二個引數規定最終選單的位置，第三個引數規定緩衝運動的方向。

（13）.clearInterval(timer)，停止上一個定時器函式的執行，否則可能會造成多個定時器函式重疊執行的情況。

（14）.timer = setInterval(function(){},30）,每隔30秒執行一次回撥函式。

（15）.if(direction == "left"){

  speed = (target-obj.offsetLeft)/8;

  speed = speed>0?Math.ceil(speed):Math.floor(speed);

  if(obj.offsetLeft == target){

    clearInterval(timer);

  }

  else{

    obj.style.left = obj.offsetLeft + speed + "px";

  }

}判斷運動的方向。

運動的速度是通過目標座標位置和當前位置的差，並通過一定的計算來確定的，由於這個差越來越小，所以會產生緩衝效果。

當於運動到指定位置的時候就會停止定時器函式的執行。

三.相關閱讀:

（1）.onresize事件參閱JavaScript resize 事件一章節。

（2）.document.documentElement.scrollTop參閱JavaScript scrollTop一章節。

（3）.document.documentElement.clientHeight參閱JavaScript clientHeight一章節。

（4）.offsetHeight參閱offsetHeight一章節。

（5）.parseInt()方法參閱JavaScript parseInt()一章節。

（6）.Math.ceil()方法參閱JavaScript Math.ceil()一章節。

（7）.Math.floor()方法參閱JavaScript Math.floor()一章節。

相關文章