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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
Nov 22 Javascript
jquery数组过滤筛选方法grep()简介
Jun 06 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
浅谈javascript实现八大排序
Apr 27 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
Nov 10 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
基于vue实现移动端圆形旋钮插件效果
Nov 28 Javascript
微信小程序实现判断是分享到群还是个人功能示例
May 03 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
BBS(php &amp; mysql)完整版(六)
2006/10/09 PHP
详解php与ethereum客户端交互
2018/04/28 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
2016/10/24 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
Angular 4.X开发实践中的踩坑小结
2017/07/04 Javascript
Vue如何从1.0迁移到2.0
2017/10/19 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
2020/06/24 Javascript
[02:51]DOTA2英雄基础教程 风暴之灵
2013/12/23 DOTA
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python实现翻转数组功能示例
2018/01/12 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
python 实现得到当前时间偏移day天后的日期方法
2018/12/31 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
python 矢量数据转栅格数据代码实例
2019/09/30 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
Python的Tqdm模块实现进度条配置
2021/02/24 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
病媒生物防治方案
2014/05/13 职场文书
毕业生求职信范文
2014/06/29 职场文书
写得不错的求职信范文
2014/07/11 职场文书
最美孝心少年事迹材料
2014/08/15 职场文书
社区植树节活动总结
2015/02/06 职场文书
2019年大学生职业生涯规划书最新范文
2019/03/25 职场文书