jQuery实现的元素抖动插件

2023-12-04 13:32:22 前端笔记 135

本章节分享一个插件，它实现了元素抖动效果。插件的优点就是调用方便，并且可以随意设置参数。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="/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，为了实现链式调用。