jQuery通過擴展實現(xiàn)抖動效果的方法
更新時間:2015年03月11日 16:41:37 作者:小編輯
這篇文章主要介紹了jQuery通過擴展實現(xiàn)抖動效果的方法,涉及jQuery擴展的技巧及抖動特效的實現(xiàn)方法,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jQuery通過擴展實現(xiàn)抖動效果的方法。分享給大家供大家參考。具體實現(xiàn)方法如下:
1. JavaScript代碼如下:
復制代碼 代碼如下:
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. 使用方法如下:
復制代碼 代碼如下:
$(function() {
$('#btn').click(function() {
$(this).shake(2,10,400);
});
});
$('#btn').click(function() {
$(this).shake(2,10,400);
});
});
希望本文所述對大家的jQuery程序設計有所幫助。
相關文章
jquery.validate.js插件使用經(jīng)驗記錄
工作中使用到了jquery.validate.js插件,下面將其用法整理一下,方便以后使用2014-07-07jQuery中event.target和this的區(qū)別詳解
這篇文章主要介紹了jQuery中event.target和this的區(qū)別詳解,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-08-08jquery插件splitScren實現(xiàn)頁面分屏切換模板特效
這篇文章主要介紹了jquery插件splitScren實現(xiàn)頁面分屏切換模板特效的相關資料,需要的朋友可以參考下2015-06-06JS遮罩層效果 兼容ie firefox jQuery遮罩層
史上最精簡,最強大的JS遮罩層效果,支持ie firefox jQuery遮罩層2010-07-07jQuery實現(xiàn)表格行數(shù)據(jù)滾動效果
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)表格行數(shù)據(jù)滾動,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-08-08input file樣式修改以及圖片預覽刪除功能詳細概括(推薦)
這篇文章主要介紹了input file樣式修改以及圖片預覽刪除功能,input file 按鈕改成自己想要的樣式以及.圖片預覽功能的實現(xiàn),具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-08