Jquery UI震動效果實現(xiàn)原理及步驟
更新時間：2013年02月04日 10:21:30 作者：
如果你想你的博客頁面某些部分引起讀者的注意，你可以使這些部分震動，如廣告等等，今天這篇文章將介紹怎樣使你的頁面中的元素震動起來,感興趣的你可不要錯過了哦，或許對你學習jquery ui 有所幫助
如果你想你的博客頁面某些部分引起讀者的注意，你可以使這些部分震動，如廣告，今天這篇文章將介紹怎樣使你的頁面中的元素震動起來。
要達到這個目的我們需要使用到Jquery和Jquery UI。
首先讓我創(chuàng)建一個震動塊，可以是圖片，也可以是普通的dom元素，如div、span等，把元素的id命名為shake，這里可以任意命名。
我們用圖片如下：
<img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>
Jquery UI沒有現(xiàn)成的使元素震動的方法，我們需要借助于effect方法來實現(xiàn)，語法如下：
effect('shake', options, speed);
參數(shù)options（這里有三個參數(shù)）：
•times：指定元素震動次數(shù)
•distance：指定元素震動幅度
•direction：指定元素震動方向
下面是具體實現(xiàn)方法，設置震動3次，每500ms調(diào)用一次震動：
function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
這里我引入了最新版的。
下面附上完整代碼
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script>
function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});
</script>
<style>
.body{
background: #F9F9F9;
}
h1{
text-align:center;
top:30px;
position: relative;
font-size: 36px;
line-height: 40px;
margin: 0;
position: relative;
font-weight: 300;
color: #C91622;
padding: 5px 0px;
text-shadow: 1px 1px 0px #F2F2F2, 1px 2px 0px #B1B1B2;
font-family: 'KenyanCoffeeRg-Regular';
height:70px;
}
.container{
display:table;
width:50%;
border-collapse: collapse;
margin: 0 auto;
}
.container img {
width:253px;
}
</style>
<title>jQuery Shake Effect</title>
</head>
<body>
<h1>jQuery Shake Effect</h1>
<br/><br/><br/>
<div class="container">
<img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>
</div>
</body>
</html>
要達到這個目的我們需要使用到Jquery和Jquery UI。
首先讓我創(chuàng)建一個震動塊，可以是圖片，也可以是普通的dom元素，如div、span等，把元素的id命名為shake，這里可以任意命名。
我們用圖片如下：
復制代碼 代碼如下:
<img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>
Jquery UI沒有現(xiàn)成的使元素震動的方法，我們需要借助于effect方法來實現(xiàn)，語法如下：
復制代碼 代碼如下:
effect('shake', options, speed);
參數(shù)options（這里有三個參數(shù)）：
•times：指定元素震動次數(shù)
•distance：指定元素震動幅度
•direction：指定元素震動方向
下面是具體實現(xiàn)方法，設置震動3次，每500ms調(diào)用一次震動：
復制代碼 代碼如下:
function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
這里我引入了最新版的。
下面附上完整代碼
復制代碼 代碼如下:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script>
function interval() {
$('#shake').effect('shake', { times:3 }, 100);
}
$(document).ready(function() {
var shake = setInterval(interval, 500);
});
</script>
<style>
.body{
background: #F9F9F9;
}
h1{
text-align:center;
top:30px;
position: relative;
font-size: 36px;
line-height: 40px;
margin: 0;
position: relative;
font-weight: 300;
color: #C91622;
padding: 5px 0px;
text-shadow: 1px 1px 0px #F2F2F2, 1px 2px 0px #B1B1B2;
font-family: 'KenyanCoffeeRg-Regular';
height:70px;
}
.container{
display:table;
width:50%;
border-collapse: collapse;
margin: 0 auto;
}
.container img {
width:253px;
}
</style>
<title>jQuery Shake Effect</title>
</head>
<body>
<h1>jQuery Shake Effect</h1>
<br/><br/><br/>
<div class="container">
<img src="http://jqueryui.com/jquery-wp-content/themes/jquery/images/logo-jquery-ui.png" id="shake"/>
</div>
</body>
</html>
您可能感興趣的文章:
- 改善你的jQuery的25個步驟 千倍級效率提升
- multiSteps 基于Jquery的多步驟滑動切換插件
- jquery.pagination.js 無刷新分頁實現(xiàn)步驟分享
- 基于jquery實現(xiàn)的一個選擇中國大學的彈框 (數(shù)據(jù)、步驟、代碼)
- 分享8款優(yōu)秀的 jQuery 加載動畫和進度條插件
- 6款新穎的jQuery和CSS3進度條插件推薦
- 基于jQuery實現(xiàn)模擬頁面加載進度條
- Jquery Uploadify多文件上傳帶進度條且傳遞自己的參數(shù)
- Jquery使用Firefox FireBug插件調(diào)試Ajax步驟講解
- Jquery Uploadify上傳帶進度條的簡單實例
- 一個簡單的jquery進度條示例
- jquery實現(xiàn)的一個簡單進度條效果實例
- 基于jquery步驟進度條源碼分享
相關文章
這篇文章主要介紹了jQuery定義背景動態(tài)切換效果的方法,實例分析了jQuery操作圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery控制頁面的展開和隱藏實現(xiàn)方法(推薦)
下面小編就為大家?guī)硪黄猨query控制頁面的展開和隱藏實現(xiàn)方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10
jQuery ajax提交Form表單實例(附demo源碼)
這篇文章主要介紹了jQuery ajax提交Form表單的方法,結(jié)合實例分析了jQuery ajax操作實現(xiàn)表單提交的相關技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04
jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能【測試可用】
這篇文章主要介紹了jQuery實現(xiàn)鼠標滑過商品小圖片上顯示對應大圖片功能,涉及jQuery事件響應、元素遍歷及屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下2018-04-04
jQuery實現(xiàn)html可聯(lián)動的百分比進度條
這篇文章主要介紹了jQuery實現(xiàn)html可聯(lián)動的百分比進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
擴展Jquery插件處理mouseover時內(nèi)部有子元素時發(fā)生樣式閃爍
在我們對一個dom添加mouseover和mouseout時，也就是jquery的hover事件，如果該dom有子元素，鼠標移到子元素時會觸發(fā)mouseout事件，但往往實際情況我們希望在子元素上不觸發(fā)out事件2011-12-12
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼
EasyUi tabs的高度與寬度根據(jù)IE窗口的變化自適應代碼,需要的朋友可以參考下。2010-10-10
在Asp.Net的MVC架構中使用jQuery是一件很容易的事情，而使用jQuery實現(xiàn)Ajax更加簡單。2010-08-08
項目需要做一個頭像截取的功能，類似于QQ頭像截取功能。在網(wǎng)上搜了下，最后使用jQuery插件jcrop來截取2013-11-11
這篇文章主要為大家詳細介紹了jquery實現(xiàn)簡易驗證插件的封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09