jQuery实现的元素抖动插件

我心飞翔 分类:实例代码

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

代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。

回复

我来回复
  • 暂无回复内容