Jquery UI震動效果實現原理及步驟_jquery

如果你想你的部落格頁面某些部分吸引讀者的注意，你可以使這些部分震動，如廣告，今天這篇文章將介紹怎樣使你的頁面中的元素震動起來。

要達到這個目的我們需要使用到Jquery和Jquery UI。
首先讓我建立一個震動塊，可以是圖片，也可以是普通的dom元素，如div、span等，把元素的id命名為shake，這裡可以任意命名。

我們用圖片如下：

複製程式碼 程式碼如下:

Jquery UI沒有現成的使元素震動的方法，我們需要藉助於effect方法來實現，語法如下：

複製程式碼


程式碼如下:


effect('shake', options, speed);

參數options（這裡有三個參數）： •times：指定元素震動次數•distance：指定元素震動幅度•direction：指定元素震動方向下面是具體實現方法，設定震動3次，每500ms調用一次震動：

複製程式碼


程式碼如下:

function interval() {
$('#shake').effect('shake', { times :3 }, 100);
} $(document).ready(function() { var shake = setInterval(interval, 500);
});

這裡我引進了最新版的。 下面附上完整程式碼

複製程式碼


程式碼如下:



程式碼如下:





<script> <BR> function interval() { <BR>$('#shake').effect('shake', { times:3 }, 100); <BR>} <BR>$(document).ready(function() { <BR>var shake = setInterval(interval, 500); <BR>}); <BR></script>

jQuery Shake Effect