jQuery滑鼠懸浮聚焦效果詳解

admin發表於2018-12-11
jQuery

分享一段程式碼例項，它實現了滑鼠懸浮聚焦效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.listBox {
  padding: 50px;
}
.listBox li {
  width: 10px;
  height: 10px;
  cursor: pointer;
  float: left;
  border-radius: 50%;
  border: 2px solid #666;
  margin: 20px;
  position: relative;
  list-style-type: none;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(function() {
  $(".listBox li").each(function(i, e) {
    var xColor = "#666";
    Eddy($(e), xColor);
  });
 
  function Eddy(e, xColor) {
    $(e).hover(function() {
      var oColor = xColor, //線條顏色--最好與目標邊框顏色相同
        oBorderSize = "1px", //線條高度--最好與目標邊框高度相同
        speed = 1500, //進入速度
        oBoxW = $(this).width(),
        oBoxH = $(this).height();
      // 在目標元素中新增四個div作為線條
      $(this).append("<div class='box_topL'></div>");
      $(this).append("<div class='box_topR'></div>");
      $(this).append("<div class='box_botL'></div>");
      $(this).append("<div class='box_botR'></div>");
      // 上左
      $(".box_topL").css({
        "width": "0px",
        "height": oBorderSize,
        "background": oColor,
        "position": "absolute",
        "top": "-1px",
        "left": -oBoxW * 1.5,
      }).animate({
        width: oBoxW,
        left: '0px'
      }, speed, function() {
        $(this).fadeOut();
      });
      // 上右
      $(".box_topR").css({
        "width": oBorderSize,
        "height": "0px",
        "background": oColor,
        "position": "absolute",
        "top": -oBoxH * 1.5,
        "right": "-1px",
      }).animate({
        height: oBoxH,
        top: '0px'
      }, speed, function() {
        $(this).fadeOut();
      });
      // 下左
      $(".box_botL").css({
        "width": oBorderSize,
        "height": "0px",
        "background": oColor,
        "position": "absolute",
        "bottom": -oBoxH * 1.5,
        "left": "-1px",
      }).animate({
        height: oBoxH,
        bottom: '0px'
      }, speed, function() {
        $(this).fadeOut();
      });
      // 下右
      $(".box_botR").css({
        "width": "0px",
        "height": oBorderSize,
        "background": oColor,
        "position": "absolute",
        "top": oBoxH,
        "right": -oBoxW * 1.5,
      }).animate({
        width: oBoxW,
        right: '0px'
      }, speed, function() {
        $(this).fadeOut();
      });
    }, function() {
      // 滑鼠離開刪除
      $(".box_topL").remove();
      $(".box_topR").remove();
      $(".box_botL").remove();
      $(".box_botR").remove();
    });
  };
})  
</script>
</head>
<body>
<ul class="listBox">
  <li></li>
  <li></li>
  <li></li>
</ul>
</body>
</html>

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

一.程式碼註釋:

（1）.$(function() {})，當文件結構完全載入完畢再去執行函式中的程式碼。

（2）.$(".listBox li").each(function(i, e) {

  var xColor = "#666";

  Eddy($(e), xColor);

})，遍歷每一個li元素，利用Eddy()註冊事件處理函式。

（3）.function Eddy(e, xColor) {}，此函式可以實現為指定元素註冊事件處理函式，第一個引數是要註冊事件處理函式的元素物件。第二個引數是一個顏色值，後面會介紹到。

（4）.$(e).hover(function() {})，為元素註冊hover事件處理函式。

（5）.var oColor = xColor，將傳遞的顏色賦值給變數oColor。

（6）.oBorderSize = "1px"，設定邊框寬度為1px。這個效果的原理。其實四個方向分別有一個div元素，根據不同方位將其設定為寬度或者高度為0，那麼在視覺上通過邊框就形成了一個條狀；再通過動畫的方式設定它的寬度或者高度以及位置，綜合起來就形成了上述效果。

（7）.speed = 1500，設定動畫完成的時間。

（8）.oBoxW = $(this).width(),oBoxH = $(this).height()，獲取li元素的寬度和高度。

（9）.$(this).append("<div class='box_topL'></div>")，為li元素追加左上側的元素。

（10）.$(".box_topL").css({

  "width": "0px",

  "height": oBorderSize,

  "background": oColor,

  "position": "absolute",

  "top": "-1px",

  "left": -oBoxW * 1.5,

}),設定左上側元素寬度為0px，高度是1px，背景色為#666。

此元素為絕對絕對定位，top值為-1px，那麼元素恰好和元素頂部邊框在同一水平線。

（11）..animate({

  width: oBoxW,

  left: '0px'

}, speed, function() {

  $(this).fadeOut();

})，以動畫方式設定橫條的寬度left值

動畫完成後，橫條隱藏。

二.相關閱讀:

（1）.each()可以參閱jQuery each()一章節。

（2）.hover()可以參閱jQuery hover事件一章節。

（3）.append()可以參閱jQuery append()一章節。

（4）.css()可以參閱jQuery css()一章節。

（5）.animate()可以參閱jQuery animate()一章節。

（6）.fadeOut()可以參閱jQuery fadeOut()一章節。

相關文章