jRumble 讓網頁元素有震動效果

jRumble 是一個可以讓網頁上的任何元素產生抖動、震動、搖動特效，可設定多種的方法來產生動畫的特效，使用這些特效的目的是希望可以更加吸引使用者能夠很快的注意到這一個網頁元素。jRumble 基於 jQuery 框架製作可以讓開發者更加容易地為網頁元素增加方法來執行 jRumble 的動畫效果，也因為是使用到了 jQuery 框架，所以對大部分瀏覽器都是有支援的。

使用方法：
第一步 載入 jRumble 需要用到的 CSS 和 JavaScript 檔案
<!-- 如果是 IE 系列的瀏覽器 讓他暫時可支援部分 HTML5 的標籤-->
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!-- 本範例的 CSS 樣式設計-->
<link rel="stylesheet" href="css/style.css" />
<!-- prettify 美化套件樣式表 -->
<link rel="stylesheet" href="css/prettify.css" />
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- jRumble 的主程式碼 -->
<script src="js/jquery.jrumble.1.3.min.js"></script>
<!-- prettify 美化套件的主程式碼如不需要可不加載此一套件 -->
<script src="js/prettify.js"></script>

第二步 設計一些測試用的 HTML 的 DIV 元素方塊
<div id="content">
  <h3>Trigger Examples</h3>
  <div class="demo-box">
    <h4>Hover</h4>
    <div id="demo13">13</div>
  </div>
  <div class="demo-box">
    <h4>Click</h4>
    <div id="demo14">14</div>
  </div>
  <div class="demo-box">
    <h4>Mousedown</h4>
    <div id="demo15">15</div>
  </div>
  <div class="demo-box last">
    <h4>Constant</h4>
    <div id="demo16">16</div>
  </div>
  <div class="demo-box">
    <h4>Remote</h4>
    <div id="demo17">17</div>
  </div>
  <div class="demo-box">
    <h4>Remote</h4>
    <div id="demo18">18</div>
  </div>
  <div class="demo-box">
    <h4>Timed (Click)</h4>
    <div id="demo19">19</div>
  </div>
  <div class="demo-box last">
    <h4>Pulse</h4>
    <div id="demo20">20</div>
  </div>
</div>

第三步 寫入 JavaScript 片段讓 jRumble 開始動作
$(function(){
$('#demo13, #demo14, #demo15, #demo16, #demo17, #demo18, #demo19, #demo20').jrumble();
$('#demo13').hover(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
$('#demo14').toggle(function(){
$(this).trigger('startRumble');
}, function(){
$(this).trigger('stopRumble');
});
$('#demo15').bind({
'mousedown': function(){
$(this).trigger('startRumble');
},
'mouseup': function(){
$(this).trigger('stopRumble');
}
});
$('#demo16').trigger('startRumble');
$('#demo17').hover(function(){
$('#demo18').trigger('startRumble');
}, function(){
$('#demo18').trigger('stopRumble');
});
$('#demo18').hover(function(){
$('#demo17').trigger('startRumble');
}, function(){
$('#demo17').trigger('stopRumble');
});
var demoTimeout;
$('#demo19').click(function(){
$this = $(this);
clearTimeout(demoTimeout);
$this.trigger('startRumble');
demoTimeout = setTimeout(function(){$this.trigger('stopRumble');}, 1500)
});
var demoStart = function(){
$('#demo20').trigger('startRumble');
setTimeout(demoStop, 300);
};
var demoStop = function(){
$('#demo20').trigger('stopRumble');
setTimeout(demoStart, 300);
};
demoStart();
});

附上 jRumble 可修改參數表

參數	預設	說明
x	2	設定水平震動範圍以像素(pixels)為單位
y	2	設定垂直震動範圍以像素(pixels)為單位
rotation	1	設定旋轉的範圍
speed	15	震動的頻率以毫秒為單位
opacity	false	是否啟用元素半透明顯示
opacityMin	.5	半透明的透明度數值

作者網站：http://jackrugile.com/jrumble/
檔案大小：59.2 KB (包含範例)
檔案下載：http://jackrugile.com/jrumble/jquery.jrumble.1.3.zip
檔案備份：下載