jQuery插件jRumble实现网页元素抖动

jRumble，它能让网页上的任意元素抖动起来，在你的网站中使用这个效果会有很大的机率吸引用户的注意力。此插件的效果可以用在链接上，或者div上，你可以设置抖动的范围、XY坐标、抖动幅度等。可设置为当鼠标移动上去抖动或者默认一直抖动，插件可定制性还是蛮高的。PS:此插件在IE中还存在一些小问题
jQuery jRumble是使用方法

<script type="text/javascript" src="js/jquery-jrumble.js"></script><script type="text/javascript">$（document）.ready（function（）{$（"#demo1"）.jrumble（{ rangeX: 2, rangeY: 2, rangeRot: 1 }）;$（"#demo2"）.jrumble（{ rangeX: 10, rangeY: 10, rangeRot: 4 }）;$（"#demo3"）.jrumble（{ rangeX: 4, rangeY: 0, rangeRot: 0 }）;$（"#demo4"）.jrumble（{ rangeX: 0, rangeY: 0, rangeRot: 5 }）;$（"#demo5"）.jrumble（{ rumbleSpeed: 0 }）;$（"#demo6"）.jrumble（{ rumbleSpeed: 50 }）;$（"#demo7"）.jrumble（{ rumbleSpeed: 100 }）;$（"#demo8"）.jrumble（{ rumbleSpeed: 200 }）;$（"#demo9"）.jrumble（{ rumbleEvent: "hover" }）;$（"#demo10"）.jrumble（{ rumbleEvent: "click" }）;$（"#demo11"）.jrumble（{ rumbleEvent: "mousedown" }）;$（"#demo12"）.jrumble（{ rumbleEvent: "constant" }）; $（"#demo13"）.jrumble（{ posX: "left", posY: "top" }）;$（"#demo14"）.jrumble（{ posX: "right", posY: "top" }）;$（"#demo15"）.jrumble（{ posX: "left", posY: "bottom" }）;$（"#demo16"）.jrumble（{ posX: "right", posY: "bottom" }）; $（".view-source pre"）.hide（）; $（".view-source a"）.toggle（function（）{ $（this）.siblings（"pre"）.stop（false, true）.slideDown（500）; $（this）.html（"Hide Source"）; }, function（）{ $（this）.siblings（"pre"）.stop（false, true）.slideUp（500）; $（this）.html（"View Source"）; }）;}）;</script>

jRumble的参数配置

Option Default Description
rangeX 2 Set the horizontal rumble range （pixels）
rangeY 2 Set the vertical rumble range （pixels）
rangeRot 1 Set the rotation range （degrees）
rumbleSpeed 10 Set the speed/frequency in milliseconds of the rumble （lower number = faster）
rumbleEvent ‘hover" Set the event that triggers the rumble （‘hover", ‘click",‘mousedown", ‘constant"）
posX ‘left" If using jRumble on a fixed or absolute positioned element, choose ‘left" or ‘right" to match your CSS
posY ‘top" If using jRumble on a fixed or absolute positioned element, choose ‘top" or ‘bottom" to match your CSS

jquery-jrumble.js源码

/*jRumble v1.1 - http://jackrugile.com/jrumbleby Jack Rugile - http://jackrugile.comCopyright 2011, Jack RugileMIT license - http://www.opensource.org/licenses/mit-license.php*/（function（$）{ $.fn.jrumble = function（options）{// JRUMBLE OPTIONS //--------------------------------- var defaults = {rangeX: 2,rangeY: 2,rangeRot: 1,rumbleSpeed: 10,rumbleEvent: "hover",posX: "left",posY: "top" }; var opt = $.extend（defaults, options）; return this.each（function（）{// VARIABLE DECLARATION//---------------------------------$obj = $（this）;var rumbleInterval; var rangeX = opt.rangeX;var rangeY = opt.rangeY;var rangeRot = opt.rangeRot;rangeX = rangeX*2;rangeY = rangeY*2;rangeRot = rangeRot*2;var rumbleSpeed = opt.rumbleSpeed;var objPosition = $obj.css（"position"）;var objXrel = opt.posX;var objYrel = opt.posY;var objXmove;var objYmove;var inlineChange;// SET POSITION RELATION IF CHANGED//---------------------------------if（objXrel === "left"）{objXmove = parseInt（$obj.css（"left"）,10）;}if（objXrel === "right"）{objXmove = parseInt（$obj.css（"right"）,10）;}if（objYrel === "top"）{objYmove = parseInt（$obj.css（"top"）,10）;}if（objYrel === "bottom"）{objYmove = parseInt（$obj.css（"bottom"）,10）;}// RUMBLER FUNCTION//---------------------------------function rumbler（elem） {var randBool = Math.random（）;var randX = Math.floor（Math.random（） * （rangeX+1）） -rangeX/2;var randY = Math.floor（Math.random（） * （rangeY+1）） -rangeY/2;var randRot = Math.floor（Math.random（） * （rangeRot+1）） -rangeRot/2; // IF INLINE, MAKE INLINE-BLOCK FOR ROTATION//---------------------------------if（elem.css（"display"） === "inline"）{ inlineChange = true; elem.css（"display", "inline-block"）}// ENSURE MOVEMENT//---------------------------------if（randX === 0 && rangeX ！== 0）{ if（randBool < .5）{ randX = 1; } else { randX = -1; }}if（randY === 0 && rangeY ！== 0）{ if（randBool < .5）{ randY = 1; } else { randY = -1; }}// RUMBLE BASED ON POSITION//---------------------------------if（objPosition === "absolute"）{ elem.css（{"position":"absolute","-webkit-transform": "rotate（"+randRot+"deg）", "-moz-transform": "rotate（"+randRot+"deg）", "-o-transform": "rotate（"+randRot+"deg）", "transform": "rotate（"+randRot+"deg）"}）; elem.css（objXrel, objXmove+randX+"px"）; elem.css（objYrel, objYmove+randY+"px"）;}if（objPosition === "fixed"）{ elem.css（{"position":"fixed","-webkit-transform": "rotate（"+randRot+"deg）", "-moz-transform": "rotate（"+randRot+"deg）", "-o-transform": "rotate（"+randRot+"deg）", "transform": "rotate（"+randRot+"deg）"}）; elem.css（objXrel, objXmove+randX+"px"）; elem.css（objYrel, objYmove+randY+"px"）;}if（objPosition === "static" || objPosition === "relative"）{ elem.css（{"position":"relative","-webkit-transform": "rotate（"+randRot+"deg）", "-moz-transform": "rotate（"+randRot+"deg）", "-o-transform": "rotate（"+randRot+"deg）", "transform": "rotate（"+randRot+"deg）"}）; elem.css（objXrel, randX+"px"）; elem.css（objYrel, randY+"px"）;}} // End rumbler function// EVENT TYPES （rumbleEvent）//--------------------------------- var resetRumblerCSS = {"position":objPosition,"-webkit-transform": "rotate（0deg）", "-moz-transform": "rotate（0deg）", "-o-transform": "rotate（0deg）", "transform": "rotate（0deg）"};if（opt.rumbleEvent === "hover"）{$obj.hover（ function（） { var rumblee = $（this）; rumbleInterval = setInterval（function（） { rumbler（rumblee）; }, rumbleSpeed）; }, function（） { var rumblee = $（this）; clearInterval（rumbleInterval）; rumblee.css（resetRumblerCSS）; rumblee.css（objXrel, objXmove+"px"）; rumblee.css（objYrel, objYmove+"px"）; if（inlineChange === true）{rumblee.css（"display","inline"）; } }）;}if（opt.rumbleEvent === "click"）{$obj.toggle（function（）{ var rumblee = $（this）; rumbleInterval = setInterval（function（） { rumbler（rumblee）; }, rumbleSpeed）;}, function（）{ var rumblee = $（this）; clearInterval（rumbleInterval）; rumblee.css（resetRumblerCSS）; rumblee.css（objXrel, objXmove+"px"）; rumblee.css（objYrel, objYmove+"px"）; if（inlineChange === true）{ rumblee.css（"display","inline"）; }}）;}if（opt.rumbleEvent === "mousedown"）{$obj.bind（{ mousedown: function（）{ var rumblee = $（this）; rumbleInterval = setInterval（function（） { rumbler（rumblee）; }, rumbleSpeed）; },mouseup: function（）{ var rumblee = $（this）; clearInterval（rumbleInterval）; rumblee.css（resetRumblerCSS）; rumblee.css（objXrel, objXmove+"px"）; rumblee.css（objYrel, objYmove+"px"）; if（inlineChange === true）{rumblee.css（"display","inline"）; } }, mouseout: function（）{ var rumblee = $（this）; clearInterval（rumbleInterval）; rumblee.css（resetRumblerCSS）; rumblee.css（objXrel, objXmove+"px"）; rumblee.css（objYrel, objYmove+"px"）; if（inlineChange === true）{rumblee.css（"display","inline"）; } }}）;}if（opt.rumbleEvent === "constant"）{var rumblee = $（this）;rumbleInterval = setInterval（function（） { rumbler（rumblee）; }, rumbleSpeed）;} }）; }; }）（jQuery）;

在线演示 http://jackrugile.com/jrumble/#demos
源码下载 http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip
以上所述就是本文的全部内容了，希望大家能够喜欢。