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

jRumble是jquery的插件，可以让你选择的元素抖动。 调用时只需一句代码即可，有些抖动效果还挺可爱，可自定义的抖动效果，十分的炫酷，有需要的小伙伴可以参考下。

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

jQuery jRumble是使用方法

1. <script type="text/javascript" src="js/jquery-jrumble.js"></script> 
2. <script type="text/javascript"> 
3. $(document).ready(function(){  
4. $('#demo1').jrumble({ 
5. rangeX: 2, 
6. rangeY: 2, 
7. rangeRot: 1 
8. }); 
9.  
10. $('#demo2').jrumble({ 
11. rangeX: 10, 
12. rangeY: 10, 
13. rangeRot: 4 
14. }); 
15.  
16. $('#demo3').jrumble({ 
17. rangeX: 4, 
18. rangeY: 0, 
19. rangeRot: 0 
20. }); 
21.  
22. $('#demo4').jrumble({ 
23. rangeX: 0, 
24. rangeY: 0, 
25. rangeRot: 5 
26. }); 
27.  
28. $('#demo5').jrumble({ 
29. rumbleSpeed: 0 
30. }); 
31.  
32. $('#demo6').jrumble({ 
33. rumbleSpeed: 50 
34. }); 
35.  
36. $('#demo7').jrumble({ 
37. rumbleSpeed: 100 
38. }); 
39.  
40. $('#demo8').jrumble({ 
41. rumbleSpeed: 200 
42. }); 
43.  
44. $('#demo9').jrumble({ 
45. rumbleEvent: 'hover' 
46. }); 
47.  
48. $('#demo10').jrumble({ 
49. rumbleEvent: 'click' 
50. }); 
51.  
52. $('#demo11').jrumble({ 
53. rumbleEvent: 'mousedown' 
54. }); 
55.  
56. $('#demo12').jrumble({ 
57. rumbleEvent: 'constant' 
58. });  
59.  
60. $('#demo13').jrumble({ 
61. posX: 'left', 
62. posY: 'top' 
63. }); 
64.  
65. $('#demo14').jrumble({ 
66. posX: 'right', 
67. posY: 'top' 
68. }); 
69.  
70. $('#demo15').jrumble({ 
71. posX: 'left', 
72. posY: 'bottom' 
73. }); 
74.  
75. $('#demo16').jrumble({ 
76. posX: 'right', 
77. posY: 'bottom' 
78. });  
79.  
80. $('.view-source pre').hide(); 
81. $('.view-source a').toggle(function(){ 
82. $(this).siblings('pre').stop(false, true).slideDown(500); 
83. $(this).html('Hide Source'); 
84. }, function(){ 
85. $(this).siblings('pre').stop(false, true).slideUp(500); 
86. $(this).html('View Source'); 
87. }); 
88. }); 
89. </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源码

1. /* 
2. jRumble v1.1 - http://jackrugile.com/jrumble 
3. by Jack Rugile - http://jackrugile.com 
4. Copyright 2011, Jack Rugile 
5. MIT license - http://www.opensource.org/licenses/mit-license.php 
6. */ 
7.  
8. (function($){ 
9. $.fn.jrumble = function(options){ 
10.  
11. // JRUMBLE OPTIONS 
12. //--------------------------------- 
13. var defaults = { 
14. rangeX: 2, 
15. rangeY: 2, 
16. rangeRot: 1, 
17. rumbleSpeed: 10, 
18. rumbleEvent: 'hover', 
19. posX: 'left', 
20. posY: 'top' 
21. }; 
22.  
23. var opt = $.extend(defaults, options); 
24.  
25. return this.each(function(){ 
26.  
27. // VARIABLE DECLARATION 
28. //--------------------------------- 
29. $obj = $(this);  
30. var rumbleInterval;  
31. var rangeX = opt.rangeX; 
32. var rangeY = opt.rangeY; 
33. var rangeRot = opt.rangeRot; 
34. rangeX = rangeX*2; 
35. rangeY = rangeY*2; 
36. rangeRot = rangeRot*2; 
37. var rumbleSpeed = opt.rumbleSpeed;  
38. var objPosition = $obj.css('position'); 
39. var objXrel = opt.posX; 
40. var objYrel = opt.posY; 
41. var objXmove; 
42. var objYmove; 
43. var inlineChange; 
44.  
45. // SET POSITION RELATION IF CHANGED 
46. //--------------------------------- 
47. if(objXrel === 'left'){ 
48. objXmove = parseInt($obj.css('left'),10); 
49. } 
50. if(objXrel === 'right'){ 
51. objXmove = parseInt($obj.css('right'),10); 
52. } 
53. if(objYrel === 'top'){ 
54. objYmove = parseInt($obj.css('top'),10); 
55. } 
56. if(objYrel === 'bottom'){ 
57. objYmove = parseInt($obj.css('bottom'),10); 
58. } 
59.  
60. // RUMBLER FUNCTION 
61. //---------------------------------  
62. function rumbler(elem) {  
63. var randBool = Math.random(); 
64. var randX = Math.floor(Math.random() * (rangeX+1)) -rangeX/2; 
65. var randY = Math.floor(Math.random() * (rangeY+1)) -rangeY/2; 
66. var randRot = Math.floor(Math.random() * (rangeRot+1)) -rangeRot/2;  
67.  
68. // IF INLINE, MAKE INLINE-BLOCK FOR ROTATION 
69. //--------------------------------- 
70. if(elem.css('display') === 'inline'){ 
71. inlineChange = true; 
72. elem.css('display', 'inline-block') 
73. } 
74.  
75. // ENSURE MOVEMENT 
76. //---------------------------------  
77. if(randX === 0 && rangeX !== 0){ 
78. if(randBool < .5){ 
79. randX = 1; 
80. } 
81. else { 
82. randX = -1; 
83. } 
84. } 
85.  
86. if(randY === 0 && rangeY !== 0){ 
87. if(randBool < .5){ 
88. randY = 1; 
89. } 
90. else { 
91. randY = -1; 
92. } 
93. } 
94.  
95. // RUMBLE BASED ON POSITION 
96. //--------------------------------- 
97. if(objPosition === 'absolute'){ 
98. elem.css({'position':'absolute','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'}); 
99. elem.css(objXrel, objXmove+randX+'px'); 
100. elem.css(objYrel, objYmove+randY+'px'); 
101. } 
102. if(objPosition === 'fixed'){ 
103. elem.css({'position':'fixed','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'}); 
104. elem.css(objXrel, objXmove+randX+'px'); 
105. elem.css(objYrel, objYmove+randY+'px'); 
106. } 
107. if(objPosition === 'static' || objPosition === 'relative'){ 
108. elem.css({'position':'relative','-webkit-transform': 'rotate('+randRot+'deg)', '-moz-transform': 'rotate('+randRot+'deg)', '-o-transform': 'rotate('+randRot+'deg)', 'transform': 'rotate('+randRot+'deg)'}); 
109. elem.css(objXrel, randX+'px'); 
110. elem.css(objYrel, randY+'px'); 
111. } 
112. } // End rumbler function 
113.  
114. // EVENT TYPES (rumbleEvent) 
115. //---------------------------------  
116. var resetRumblerCSS = {'position':objPosition,'-webkit-transform': 'rotate(0deg)', '-moz-transform': 'rotate(0deg)', '-o-transform': 'rotate(0deg)', 'transform': 'rotate(0deg)'}; 
117.  
118. if(opt.rumbleEvent === 'hover'){ 
119. $obj.hover( 
120. function() { 
121. var rumblee = $(this); 
122. rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); 
123. }, 
124. function() { 
125. var rumblee = $(this); 
126. clearInterval(rumbleInterval); 
127. rumblee.css(resetRumblerCSS); 
128. rumblee.css(objXrel, objXmove+'px'); 
129. rumblee.css(objYrel, objYmove+'px'); 
130. if(inlineChange === true){ 
131. rumblee.css('display','inline'); 
132. } 
133. } 
134. ); 
135. } 
136.  
137. if(opt.rumbleEvent === 'click'){ 
138. $obj.toggle(function(){ 
139. var rumblee = $(this); 
140. rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); 
141. }, function(){ 
142. var rumblee = $(this); 
143. clearInterval(rumbleInterval); 
144. rumblee.css(resetRumblerCSS); 
145. rumblee.css(objXrel, objXmove+'px'); 
146. rumblee.css(objYrel, objYmove+'px'); 
147. if(inlineChange === true){ 
148. rumblee.css('display','inline'); 
149. } 
150. }); 
151. } 
152.  
153. if(opt.rumbleEvent === 'mousedown'){ 
154. $obj.bind({ 
155. mousedown: function(){ 
156. var rumblee = $(this); 
157. rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); 
158. },  
159. mouseup: function(){ 
160. var rumblee = $(this); 
161. clearInterval(rumbleInterval); 
162. rumblee.css(resetRumblerCSS); 
163. rumblee.css(objXrel, objXmove+'px'); 
164. rumblee.css(objYrel, objYmove+'px'); 
165. if(inlineChange === true){ 
166. rumblee.css('display','inline'); 
167. } 
168. }, 
169. mouseout: function(){ 
170. var rumblee = $(this); 
171. clearInterval(rumbleInterval); 
172. rumblee.css(resetRumblerCSS); 
173. rumblee.css(objXrel, objXmove+'px'); 
174. rumblee.css(objYrel, objYmove+'px'); 
175. if(inlineChange === true){ 
176. rumblee.css('display','inline'); 
177. } 
178. } 
179. }); 
180. } 
181.  
182. if(opt.rumbleEvent === 'constant'){ 
183. var rumblee = $(this); 
184. rumbleInterval = setInterval(function() { rumbler(rumblee); }, rumbleSpeed); 
185. } 
186.  
187. }); 
188. };  
189. })(jQuery); 

在线演示http://jackrugile.com/jrumble/#demos

源码下载http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip

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