jQuery通过扩展实现抖动效果的方法
更新时间：2015年03月11日 16:41:37 作者：小编辑
这篇文章主要介绍了jQuery通过扩展实现抖动效果的方法,涉及jQuery扩展的技巧及抖动特效的实现方法,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了jQuery通过扩展实现抖动效果的方法。分享给大家供大家参考。具体实现方法如下：
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获取this当前对象子元素对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
使用CSS和jQuery模拟select并附提交后取得数据的代码
使用CSS和jQuery模拟select并实现提交后取得数据，详细实现及截图如下，感兴趣的朋友可以参考下2013-10-10
Jqzoom是基于jquery的放大镜效果插件，兼容多款浏览器，喜欢的朋友可以测试下。2010-04-04
这篇文章主要介绍了Jquery对select的增、删、改、查操作的方法,需要的朋友可以参考下2015-02-02
这篇文章主要介绍了jQuery实现的简单拖动层,可实现响应鼠标拖动div层及动态显示坐标值的功能,涉及jQuery鼠标响应及页面元素属性相关操作技巧,需要的朋友可以参考下2017-02-02
本篇文章主要是对jquery 无限级下拉菜单的简单实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
基于jQuery UI CSS Framework开发Widget的经验
jQuery UI CSS Framework是jQuery UI中的一个样式框架，可以利用jQuery Theme roller 来生成自己想要的css样式效果。我们可以利用jQuery UI的一些框架来开发出基于jQuery UI CSS Framework效果的插件来。2010-08-08
下面小编就为大家带来一篇jQuery中实现prop()函数控制多选框(全选,反选)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了jQuery实现点击下拉框中的值累加到文本框中的方法,涉及jQuery事件绑定及页面元素属性动态获取与操作相关实现技巧,需要的朋友可以参考下2017-10-10
之前做一个代码提示的功能涉及到在文本框中插入文本的操作,需要获得当前光标位置插入文本,本文章向大家介绍jQuery如何设置文本区域的光标位置，需要的朋友可以参考一下2018-06-06
最新评论