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类继承机制的原理分析
Sep 12 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
学习javascript的闭包,原型,和匿名函数之旅
Oct 18 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
Vue2 使用 Echarts 创建图表实例代码
May 18 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
Aug 28 jQuery
详解axios 全攻略之基本介绍与使用(GET 与 POST)
Sep 15 Javascript
vue-router重定向不刷新问题的解决
Jun 25 Javascript
SVG实现时钟效果
Jul 17 Javascript
Node.js API详解之 V8模块用法实例分析
Jun 05 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解答方法
2012/02/04 PHP
sae使用smarty模板的方法
2013/12/17 PHP
smarty模板引擎基础知识入门
2015/03/30 PHP
php获取本周星期一具体日期的方法
2015/04/20 PHP
jQuery-ui中自动完成实现方法
2010/06/10 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
js异步加载的三种解决方案
2013/03/04 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
2013/11/14 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
2013/11/28 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
js实现简单的验证码
2015/12/25 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
jQuery使用each方法与for语句遍历数组示例
2016/06/16 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
javascript实现延时显示提示框效果
2017/06/01 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
2017/10/26 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
Vue中props的使用详解
2018/06/15 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
Scrapy抓取京东商品、豆瓣电影及代码分享
2017/11/23 Python
Python连接Mssql基础教程之Python库pymssql
2018/09/16 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
Python实现读取txt文件中的数据并绘制出图形操作示例
2019/02/26 Python
Python常用模块os.path之文件及路径操作方法
2019/12/03 Python
浅谈python中频繁的print到底能浪费多长时间
2020/02/21 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python实现mean-shift聚类算法
2020/06/10 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
公司委托书怎么写
2014/08/02 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python