首頁 > web前端 > js教程 > Jquery UI震動效果實現原理及步驟_jquery

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

WBOY
發布: 2016-05-16 17:42:26
原創
1177 人瀏覽過

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

要達到這個目的我們需要使用到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

jQuery Shake Effect




Jquery UI震動效果實現原理及步驟_jquery
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板