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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
清空上传控件input file的值
Jul 03 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
javascript特效实现——当前时间和倒计时效果的简单实例
Jul 20 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
mock.js实现模拟生成假数据功能示例
Jan 15 Javascript
webpack-url-loader 解决项目中图片打包路径问题
Feb 15 Javascript
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
实用函数3
2007/11/08 PHP
SESSION信息保存在哪个文件目录下以及能够用来保存什么类型的数据
2012/06/17 PHP
PHP读取CURL模拟登录时生成Cookie文件的方法
2014/11/04 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
thinkphp框架表单数组实现图片批量上传功能示例
2020/04/04 PHP
js动态创建、删除表格示例代码
2013/08/07 Javascript
js动态删除div元素基本思路及实现代码
2014/05/08 Javascript
一个判断抢购时间是否到达的简单的js函数
2014/06/23 Javascript
js实现横向拖拽导航条功能
2017/02/17 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
小发现之浅谈location.search与location.hash的问题
2017/06/23 Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
2017/07/17 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
js 显示日期时间的实例(时间过一秒加1)
2017/10/25 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
vue之封装多个组件调用同一接口的案例
2020/08/11 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
Python数据操作方法封装类实例
2017/06/23 Python
解决pyecharts在jupyter notebook中使用报错问题
2020/04/23 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
python实现图片横向和纵向拼接
2020/03/05 Python
PyTorch中的C++扩展实现
2020/04/02 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
Doyoueven官网:澳大利亚健身服饰和配饰品牌
2019/03/24 全球购物
银行实习生的自我评价
2013/12/09 职场文书
班级寄语大全
2014/04/10 职场文书
个人安全承诺书
2014/05/22 职场文书
国际金融专业自荐信
2014/07/05 职场文书
2014年幼儿园保育工作总结
2014/12/02 职场文书
骨干教师申报材料
2014/12/17 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js