jRumble 是個可以讓指定的元素產生類似得猴(ㄉㄧㄡˇ ㄍㄠˊ)效果的外掛。雖然多少可以增加網頁的活潑性,但一整個都抖動的話,也許會影響瀏覽器的效能喔!
套件名稱:jRumble
套件版本:1.3
作者網站:http://jackrugile.com/jrumble/
套件網址:N/A
發佈日期:2011-12-03
檔案大小:4.84 KB
檔案下載:jquery.jrumble.1.3.js
參數說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | X(選填) 描述: 水平抖動範圍(px) 預設值: 2 Y(選填) 描述: 垂直抖動範圍(px) 預設值: 2 rotation(選填) 描述: 旋轉抖動範圍(degrees) 預設值: 1 speed(選填) 描述: 抖動的速度, 數字越小抖會快;單位毫秒(1000毫秒 = 1秒) 預設值: 15 opacity(選填) 描述: 是否抖動時改變透明度 預設值: false opacityMin(選填) 描述: 如果 opacity 設為 true 時, 則在抖動過程會改變透明度範圍 預設值: .5 |
方法說明:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 | // 初使化設定 $(selector).jrumble(options); // 開始抖動 $(selector).trigger('startRumble'); // 停止抖動 $(selector).textualizer('stopRumble'); |
使用範例:
檢視原始碼 JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.jrumble.1.3.js"></script> <style type="text/css"> div { background: #f36; color: #fff; font-size: 30px; font-weight: bold; line-height: 130px; margin: 10px 20px 20px 0; text-align: center; float: left; height: 130px; width: 130px; } </style> <script type="text/javascript"> $(function() { // 上下左右搖動但不旋轉 $('#demo1').jrumble({ x: 2, y: 2, rotation: 0 }); // 上下左右搖動且旋轉加透明效果 $('#demo2').jrumble({ x: 6, y: 6, rotation: 6, speed: 5, opacity: true, opacityMin: .05 }); // 當滑鼠移到 #demo1, #demo2 時開始/停止效果 $('#demo1, #demo2').hover(function(){ $(this).trigger('startRumble'); }, function(){ $(this).trigger('stopRumble'); }); }); </script> <body> <div id="demo1">1</div> <div id="demo2">2</div> </body> |
備註:
因為整個抖動主要是透過 CSS3 來做出效果的,所以像是 rotation 的部份在 IE8(含)以下就沒有效果囉!
男丁大,想詢問一下 有沒有辦法把他變成是一張圖片在抖動呢? 謝謝
可以啊, 什麼都能抖。不過...這你應該自己試一下就知道結果了吧!!