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()一章节。