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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
jQuery hover 延时器实现代码
Mar 12 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
Oct 09 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
Vue form 表单提交+ajax异步请求+分页效果
Apr 22 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
PHP自动加载autoload和命名空间的应用小结
Dec 01 Javascript
js判断节假日实例代码
Dec 27 Javascript
Javascript获取某个月的天数
May 30 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&amp;mysql(五)
2006/10/09 PHP
PHP中date()日期函数有关参数整理
2011/07/19 PHP
php gzip压缩输出的实现方法
2013/04/27 PHP
PHP之预定义接口详解
2015/07/29 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
javascript滚轮事件基础实例讲解(37)
2017/02/14 Javascript
angularjs指令之绑定策略(@、=、&amp;)
2017/04/13 Javascript
js判断数组是否包含某个字符串变量的实例
2017/11/24 Javascript
关于vue面试题汇总
2018/03/20 Javascript
详解webpack 最简打包结果分析
2019/02/20 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
通过Nodejs搭建网站简单实现注册登录流程
2019/06/14 NodeJs
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
python判断字符串是否包含子字符串的方法
2015/03/24 Python
python开发之thread实现布朗运动的方法
2015/11/11 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
opencv+python实现鼠标点击图像,输出该点的RGB和HSV值
2020/06/02 Python
美国顶尖折扣时尚购物网:Bluefly
2016/08/28 全球购物
一些PHP的面试题
2015/05/06 面试题
SQL Server面试题
2013/04/04 面试题
应届生法律顾问求职信
2013/11/19 职场文书
入党积极分子介绍信
2014/01/17 职场文书
免职证明样本
2014/10/23 职场文书
七一晚会主持词
2015/06/29 职场文书
认识实习感想
2015/08/10 职场文书
请病假条范文
2015/08/17 职场文书
商务信函英语问候语
2015/11/10 职场文书
小学思品教学反思
2016/02/20 职场文书
MySQL InnoDB ReplicaSet(副本集)简单介绍
2021/04/24 MySQL
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
Python中字符串对象语法分享
2022/02/24 Python
Nginx实现会话保持的两种方式
2022/03/18 Servers
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS