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 巧妙获取剪贴板数据 Excel数据的粘贴
Jul 09 Javascript
jquery 简单的进度条实现代码
Mar 11 Javascript
js实时获取系统当前时间实例代码
Jun 28 Javascript
setTimeout()与setInterval()方法区别介绍
Dec 24 Javascript
移动节点的jquery代码
Jan 13 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
微信小程序 template模板详解及实例代码
Mar 09 Javascript
Vue的土著指令和自定义指令实例详解
Feb 04 Javascript
Vue下路由History模式打包后页面空白的解决方法
Jun 29 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 Vue.js
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在XP下IIS和Apache2服务器上的安装
2006/09/05 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
jquery mobile实现拨打电话功能的几种方法
2013/08/05 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
window.location.href IE下跳转失效的解决方法
2014/03/27 Javascript
一张表格告诉你windows.onload()与$(document).ready()的区别
2014/05/16 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
回调函数的意义以及python实现实例
2017/06/20 Python
Django uwsgi Nginx 的生产环境部署详解
2019/02/02 Python
Python3.5内置模块之time与datetime模块用法实例分析
2019/04/27 Python
浅谈Python小波分析库Pywavelets的一点使用心得
2019/07/09 Python
python GUI库图形界面开发之PyQt5 Qt Designer工具(Qt设计师)详细使用方法及Designer ui文件转py文件方法
2020/02/26 Python
Python中qutip用法示例详解
2020/10/02 Python
Python通过len函数返回对象长度
2020/10/22 Python
解决TensorFlow训练模型及保存数量限制的问题
2021/03/03 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
Kate Spade澳大利亚官方网站:美国设计师手袋品牌
2019/09/10 全球购物
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
环保建议书
2014/03/12 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
端午节活动总结
2014/08/26 职场文书
暑期家教宣传单
2015/07/14 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
如何书写邀请函?
2019/06/24 职场文书
Go 内联优化让程序员爱不释手
2022/06/21 Golang