jQuery實現的元素抖動外掛

admin發表於2017-04-01
jQuery

本章節分享一個外掛，它實現了元素抖動效果。外掛的優點就是呼叫方便，並且可以隨意設定引數。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#antzone{
  width:200px;
  height:100px;
  background:#ccc;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
/*intShakes Amount of shakes*/
/*intDistance Shake distance*/
/*intDuration Time duration*/
jQuery.fn.shake = function(intShakes,intDistance,intDuration) {
  this.each(function() {
    var jqNode = $(this);
    jqNode.css({position: "relative"});
    for (var x=1; x<=intShakes; x++) {
      jqNode.animate({ left: (intDistance * -1) },(intDuration / intShakes) / 4)
      .animate({ left: intDistance },(intDuration/intShakes)/2)
      .animate({ left: 0 },(intDuration/intShakes)/4);
    }
  });
  return this;
}
$(function() {
  $('#antzone').click(function() {
    $(this).shake(4,10,400);
  });
});
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了點選元素抖動效果，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.jQuery.fn.shake = function(intShakes,intDistance,intDuration) {}，為jquery物件例項新增一個shake()方法，此方法實現匹配元素的抖動效果。第一個參數列示要完成完整抖動的次數，第二個參數列示抖動的幅度，第三個參數列示抖動持續的時間。

（2）.this.each(function() {})，使用each()方法遍歷每一個匹配的元素。

（3）.var jqNode = $(this)，將當前的元素轉換為jquery物件。

（4）.jqNode.css({position: "relative"})，將當前元素設定為相對定位。

（5）.for (var x=1; x<=intShakes; x++) {

  jqNode.animate({ left: (intDistance * -1) },(intDuration / intShakes) / 4)

  .animate({ left: intDistance },(intDuration/intShakes)/2)

  .animate({ left: 0 },(intDuration/intShakes)/4);

}，這個迴圈是實現抖動的核心，是一個純粹的數學問題，這裡簡要做一下說明，每一次動畫時間都除以intShakes（抖動的次數），也就是說每一次完整的抖動都分配了一個固定時間，第一動畫用了每次迴圈的四分之一的時間，第二個動畫用了二分之一的時間，第三個動畫用了四分之一的時間，恰好是一個完整的抖動過程。

（6）.return this，為了實現鏈式呼叫。

二.相關閱讀:

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

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

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

相關文章