jQuery通过扩展实现抖动效果的方法


Posted in Javascript onMarch 11, 2015

本文实例讲述了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;

}

2. 使用方法如下:
$(function() {

  $('#btn').click(function() {

    $(this).shake(2,10,400);

  });

});

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
jQuery EasyUI 中文API Layout(Tabs)
Apr 27 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
Javascript alert消息换行的方法
Aug 07 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jQuery简单实现上下,左右滑动的方法
Jun 01 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
JS函数节流和防抖之间的区分和实现详解
Jan 11 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
jQuery中event.target和this的区别详解
Aug 13 jQuery
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 #Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 #Javascript
jQuery实现带动画效果的二级下拉导航方法
Mar 11 #Javascript
jquery图形密码实现方法
Mar 11 #Javascript
jQuery模拟新浪微博首页滚动效果的方法
Mar 11 #Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
Mar 11 #Javascript
jQuery实现统计输入文字个数的方法
Mar 11 #Javascript
You might like
php的POSIX 函数以及进程测试的深入分析
2013/06/03 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
教你如何开启shopnc b2b2c 伪静态
2014/10/21 PHP
php面向对象中static静态属性与方法的内存位置分析
2015/02/08 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP CURL post数据报错 failed creating formpost data
2016/10/16 PHP
php自定义时间转换函数示例
2016/12/07 PHP
PHP面向对象多态性实现方法简单示例
2017/09/27 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
php跨域调用json的例子
2013/11/13 Javascript
Javascript学习指南
2014/12/01 Javascript
一起学写js Calender日历控件
2016/04/14 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
AngularJS 监听变量变化的实现方法
2018/10/09 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
微信小程序上传多图到服务器并获取返回的路径
2019/05/05 Javascript
个人小程序接入支付解决方案
2019/05/23 Javascript
Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)
2019/11/21 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
vue绑定class的三种方法
2020/12/24 Vue.js
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
Python画图学习入门教程
2016/07/01 Python
带你了解python装饰器
2017/06/15 Python
django迁移数据库错误问题解决
2019/07/29 Python
您的网上新华书店:文轩网
2016/08/24 全球购物
2015年酒店客房部工作总结
2015/04/25 职场文书
信用卡催款律师函
2015/05/27 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016年父亲节寄语
2015/12/04 职场文书
《青山不老》教学反思
2016/02/22 职场文书
2016年教师师德师风承诺书
2016/03/25 职场文书
Hive导入csv文件示例
2022/06/25 数据库