透明層滑動跟隨導航選單

admin發表於2018-12-23

分享一段程式碼例項，它實現了滑鼠懸浮導航選單，有透明層滑動跟隨的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul,li { 
  padding: 0; 
  margin: 0; 
}
li { 
  list-style: none; 
}
#box{
  height: 48px;
  width: 900px;
  background-color: #459DF5;
  margin: 50px auto;
  position: relative;
}
#caution {
  width: 150px;
  height: 48px;
  background-color: #4B92D8;
  position: absolute;
  top: 0;
  left: 0;
}
#list {
  position: absolute;
}
#list li {
  width: 150px;
  height: 48px;
  float: left;
  color: #fff;
  font: 500 20px/48px "微軟雅黑";
  text-align: center;
  cursor: pointer;
}
</style>
<script>
window.onload = function() {
  var oUl = document.getElementById("list");
  var caution = document.getElementById("caution");
  var aLi = oUl.children;
 
  var timer = null;
 
  var leader = 0;
  var target = 0;
  var current = 0;
 
 
  for (var index = 0; index < aLi.length; index++) {
    aLi[index].onmouseover = function () {
      clearInterval(timer);
      target = this.offsetLeft;
      timer = setInterval(autoCaution, 20);
    }
    aLi[index].onmousedown = function () {
      for (var j = 0; j < aLi.length; j++) {
        aLi[j].style.color = "#fff";
      }
      this.style.color = "#ccc";
      current = this.offsetLeft;
      caution.style.left = current + "px";
    }
  }
  oUl.onmouseout = function() {
    clearInterval(timer);
    target = current;
    timer = setInterval(autoCaution, 20);
  }
 
  function autoCaution() {
    leader = leader + (target - leader) / 10;
    caution.style.left = leader + "px";
  }
}
</script>
</head>
<body>
  <div id="box">
    <span id="caution"></span>
    <ul id="list">
      <li>首頁</li>
      <li>螞蟻部落一</li>
      <li>螞蟻部落二</li>
      <li>螞蟻部落三</li>
      <li>螞蟻部落四</li>
    </ul>
  </div>
</body>
</html>

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

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
ul,li { 
  padding: 0; 
  margin: 0; 
}

進行簡單的初始化操作，將外邊距和內邊距都設定為0。

[CSS] 純文字檢視 複製程式碼
li { 
  list-style: none; 
}

刪除列表預設的樣式效果。

[CSS] 純文字檢視 複製程式碼
#box{
  height: 48px;
  width: 900px;
  background-color: #459DF5;
  margin: 50px auto;
  position: relative;
}

導航選單的容器元素，通過margin設定它為水平居中效果。

並且設定它為相對定位，這一點很重要，那麼它內部的定位子元素就以它為定位參考物件。

[CSS] 純文字檢視 複製程式碼
#caution {
  width: 150px;
  height: 48px;
  background-color: #4B92D8;
  position: absolute;
  top: 0;
  left: 0;
}

這個就是我們所看到的"透明層"，然而事實它並不是透明的，它採用定位，會被導航選單所覆蓋。同時又由於導航選單是透明的，當我們滑鼠懸浮的時候，此元素會跟隨移動，在外觀上就實現了透明層滑動跟隨效果。

[CSS] 純文字檢視 複製程式碼
#list {
  position: absolute;
}

設定它為絕對定位，這樣此元素就可以覆蓋在#caution之上。

[CSS] 純文字檢視 複製程式碼
#list li {
  width: 150px;
  height: 48px;
  float: left;
  color: #fff;
  font: 500 20px/48px "微軟雅黑";
  text-align: center;
  cursor: pointer;
}

設定li元素的相關樣式，比較簡單。

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

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

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

獲取對應id屬性值的元素物件。

[JavaScript] 純文字檢視 複製程式碼
var aLi = oUl.children;

獲取元素物件下面的子元素物件結合。

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

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

[JavaScript] 純文字檢視 複製程式碼
var leader = 0;
var target = 0;
var current = 0;

宣告三個變數，並賦初值為0，後面會介紹到。

[JavaScript] 純文字檢視 複製程式碼
for (var index = 0; index < aLi.length; index++) {
  //code
}

通過for迴圈為li元素批量註冊事件處理函式。

[JavaScript] 純文字檢視 複製程式碼
aLi[index].onmouseover = function () {
  clearInterval(timer);
  target = this.offsetLeft;
  timer = setInterval(autoCaution, 20);
}

註冊mouserover事件處理函式。

clearInterval(timer)停止上一個定時器函式的執行，否則出現滑鼠連續移入導致重疊的現象。

target = this.offsetLeft獲取當前li元素距離定位的父級元素的距離。

timer = setInterval(autoCaution, 20)，通過定時器函式，每隔20毫秒呼叫一次autoCaution函式。

[JavaScript] 純文字檢視 複製程式碼
aLi[index].onmousedown = function () {
  for (var j = 0; j < aLi.length; j++) {
    aLi[j].style.color = "#fff";
  }
  this.style.color = "#ccc";
  current = this.offsetLeft;
  caution.style.left = current + "px";
}

為li元素註冊mousedown事件處理函式。

首先通過for迴圈將字型顏色設定為#fff，然後再將當前li元素的字型顏色設定為#ccc。

再獲取當前li元素距離父級定位元素的距離。

最後將#caution元素的left屬性值設定為current 。

[JavaScript] 純文字檢視 複製程式碼
oUl.onmouseout = function() {
  clearInterval(timer);
  target = current;
  timer = setInterval(autoCaution, 20);
}

為oul元素註冊mouseout事件處理函式。

當滑鼠離開ul元素，那麼就將#caution元素設定在current位置。

[JavaScript] 純文字檢視 複製程式碼
function autoCaution() {
  leader = leader + (target - leader) / 10;
  caution.style.left = leader + "px";
}

通過不斷地呼叫此函式以實現動畫方式實現跟隨效果。

相關文章