jQuery滑鼠懸浮翻牌效果詳解

admin發表於2018-11-24
jQuery

本章節分享一段程式碼例項，它實現了滑鼠懸浮翻牌效果。

此效果通常用於導航或者廣告，下面通過一段簡單的程式碼介紹一下如何實現此效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
ul, li{
  list-style:none;
  padding:0;
  margin:0;
}
#btncell{
  width:300px;
  height:100px;
  border:1px solid #777;
  margin:50px auto;
}
#btncell li{
  width:100px;
  float:left;
  height:50px;
  font-size:14px;
  text-align:center;
  line-height:28px;
  position:relative;
  z-index:1;
}
#btncell li a{
  display:block;
  height:28px;
  border:2px solid #333;
  text-decoration:none;
  width:50px;
  background:#888;
  overflow:hidden;
  position:absolute;
  left:25px;
  top:10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var nummove=0;
var numout=0;
$(function(){
  $("#btncell li").hover(function(){
    if(nummove==0){
      nummove=1;
      $("a",this).animate({
        height:"0px",
        top:"25px"
      }, 80);
      $("a",this).animate({ 
        height:"28px",
        top:"10px"
      }, 80,function(){
        nummove=0;
      });
      $("a",this).css("background","yellow");
    }
  },function(){
    if(numout==0){
      numout=1;
      $("a",this).animate({ height: "0px",top: "25px"}, 80,function(){numout=0;});
      $("a",this).animate({ height: "28px",top: "10px"}, 80);
      $("a",this).css("background","#888");
      numout=0;
    }
  })
})
</script>
</head>
<body>
<ul id="btncell">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  <li><a href="#">6</a></li>
</ul>
</body>
</html>

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

一.程式碼註釋:

（1）.var nummove=0，此變數用作滑鼠懸浮時是否可以開始一個新的動畫的標識。

（2）.var numout=0，此變數用作滑鼠離開時是否可以開始一個新的動畫的標識。

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

（4）.$("#btncell li").hover()，為li元素註冊hover事件處理函式（hover事件是兩個事件的合體，並不是真有這麼一個事件）。

（5）.if(nummove==0){

  nummove=1;

  $("a",this).animate({

    height:"0px",

    top:"25px"

  }, 80);

  $("a",this).animate({ 

    height:"28px",

    top:"10px"

  }, 80,function(){

    nummove=0;

  });

  $("a",this).css("background","yellow");

}，通過變數nummove可以判斷是否可以開始一個新的動畫序列，之所以要這樣是為了防止快速反覆的滑鼠劃入劃出，這樣的話會累積很多動畫要執行。翻拍效果也是我們視覺上的現象，就是通過使用動畫方式設定元素的高度，並且不斷調整top屬性值，可以將動畫執行時間加長能夠感受這種效果。

二.相關閱讀:

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

（2）.animate()可以參閱jQuery animate()方法一章節。

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

相關文章