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的参数配置

OptionDefaultDescription
rangeX2Set the horizontal rumble range (pixels)
rangeY2Set the vertical rumble range (pixels)
rangeRot1Set the rotation range (degrees)
rumbleSpeed10Set 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:///jrumble/jquery.jrumble.1.3.zip

以上所述就是本文的全部内容了，希望大家能够喜欢。