jQuery通過擴展實現(xiàn)抖動效果的方法
更新時間：2015年03月11日 16:41:37 作者：小編輯
這篇文章主要介紹了jQuery通過擴展實現(xiàn)抖動效果的方法,涉及jQuery擴展的技巧及抖動特效的實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery通過擴展實現(xiàn)抖動效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
1. JavaScript代碼如下：
復(fù)制代碼 代碼如下:
jQuery.fn.shake = function(intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/) {
this.each(function() {
var jqNode = $(this);
jqNode.css({position: ‘relative'});
for (var x=1; x<=intShakes; x++) {
jqNode.animate({ left: (intDistance * -1) },(((intDuration / intShakes) / 4)))
.animate({ left: intDistance },((intDuration/intShakes)/2))
.animate({ left: 0 },(((intDuration/intShakes)/4)));
}
});
return this;
}
this.each(function() {
var jqNode = $(this);
jqNode.css({position: ‘relative'});
for (var x=1; x<=intShakes; x++) {
jqNode.animate({ left: (intDistance * -1) },(((intDuration / intShakes) / 4)))
.animate({ left: intDistance },((intDuration/intShakes)/2))
.animate({ left: 0 },(((intDuration/intShakes)/4)));
}
});
return this;
}
2. 使用方法如下：
復(fù)制代碼 代碼如下:
$(function() {
$('#btn').click(function() {
$(this).shake(2,10,400);
});
});
$('#btn').click(function() {
$(this).shake(2,10,400);
});
});
希望本文所述對大家的jQuery程序設(shè)計有所幫助。
相關(guān)文章
jquery.validate.js插件使用經(jīng)驗記錄
工作中使用到了jquery.validate.js插件，下面將其用法整理一下，方便以后使用2014-07-07
jQuery中event.target和this的區(qū)別詳解
這篇文章主要介紹了jQuery中event.target和this的區(qū)別詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
一般元素下的多個指定子元素顯示隱藏效果,使用css中的選擇器:nth-child()、:nth-of-type(),但如果想使用JavaScript動態(tài)控制,就需要用到j(luò)query的filter()方法2023-08-08
jquery插件splitScren實現(xiàn)頁面分屏切換模板特效
這篇文章主要介紹了jquery插件splitScren實現(xiàn)頁面分屏切換模板特效的相關(guān)資料,需要的朋友可以參考下2015-06-06
JS遮罩層效果 兼容ie firefox jQuery遮罩層
史上最精簡，最強大的JS遮罩層效果，支持ie firefox jQuery遮罩層2010-07-07
這篇文章主要介紹了jQuery性能優(yōu)化技巧,較為詳細(xì)的分析了jQuery的常見使用技巧,非常具有實用價值,需要的朋友可以參考下2015-02-02
jQuery實現(xiàn)表格行數(shù)據(jù)滾動效果
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)表格行數(shù)據(jù)滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
input file樣式修改以及圖片預(yù)覽刪除功能詳細(xì)概括（推薦）
這篇文章主要介紹了input file樣式修改以及圖片預(yù)覽刪除功能，input file 按鈕改成自己想要的樣式以及.圖片預(yù)覽功能的實現(xiàn)，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
本文為大家收集了10個非?？岬?jQuery 工具提示（Tooltip）插件，希望大家能喜歡2011-10-10
jQuery.extend 函數(shù)及用法詳細(xì)
Jquery的擴展方法extend是我們在寫插件的過程中常用的方法，該方法有一些重載原型，在此，我們一起通過本篇文章學(xué)習(xí)jquery.extend函數(shù)及用法詳解吧2015-09-09