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,超强推荐share.js
Dec 23 Javascript
判断输入是否为空,获得输入类型的JS代码
Oct 30 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
脚本合并提升javascript性能示例
Feb 24 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 Javascript
JS+CSS实现分类动态选择及移动功能效果代码
Oct 19 Javascript
require.js+vue开发微信上传图片组件
Oct 27 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
Nov 11 Javascript
如何开发出更好的JavaScript模块
Dec 22 Javascript
JS解惑之Object中的key是有序的么
May 06 Javascript
vue.js中ref和$refs的使用及示例讲解
Aug 14 Javascript
React中获取数据的3种方法及优缺点
Feb 18 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
PHP音乐采集(部分代码)
2007/02/14 PHP
探讨如何把session存入数据库
2013/06/07 PHP
php中strtotime函数用法详解
2014/11/15 PHP
四个常见html网页乱码问题及解决办法
2015/09/08 PHP
php版微信公众平台入门教程之开发者认证的方法
2016/09/26 PHP
php删除txt文件指定行及按行读取txt文档数据的方法
2017/01/30 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
关于ThinkPHP中的异常处理详解
2018/05/11 PHP
jquery 表单下所有元素的隐藏
2009/07/25 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
基于Vue2的移动端开发环境搭建详解
2016/11/03 Javascript
微信小程序实现表单校验功能
2020/03/30 Javascript
vue组件父与子通信详解(一)
2017/11/07 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
微信小程序日历插件代码实例
2019/12/04 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
python函数缺省值与引用学习笔记分享
2013/02/10 Python
Python中正则表达式的用法实例汇总
2014/08/18 Python
python简单获取数组元素个数的方法
2015/07/13 Python
python中类的属性和方法介绍
2018/11/27 Python
对Python3 序列解包详解
2019/02/16 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
Python 执行矩阵与线性代数运算
2020/08/01 Python
python使用列表的最佳方案
2020/08/12 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
KENZO官网:高田贤三在法国创立的品牌
2019/05/16 全球购物
道德大讲堂实施方案
2014/05/14 职场文书
致接力运动员加油稿
2015/07/21 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers