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 相关文章推荐
jQuery 操作XML入门
Dec 25 Javascript
xml和web特殊字符
Apr 28 Javascript
JS实现点击链接取消跳转效果的方法
Jan 24 Javascript
jQuery实现移动端滑块拖动选择数字效果
Dec 24 Javascript
jQuery实现获取table表格第一列值的方法
Mar 01 Javascript
Vue开发过程中遇到的疑惑知识点总结
Jan 20 Javascript
javascript实现简易计算器
Feb 01 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
vue-content-loader内容加载器的使用方法
Aug 05 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
Nov 08 Javascript
JavaScript中reduce()的5个基本用法示例
Jul 19 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开源建站平台小结
2010/04/22 PHP
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
仿百度输入框智能提示的js代码
2013/08/22 Javascript
uploadify多文件上传参数设置技巧
2015/11/16 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
jQuery 移动端拖拽(模块化开发,触摸事件,webpack)
2016/10/28 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
vue封装第三方插件并发布到npm的方法
2017/09/25 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
微信小程序实现的五星评价功能示例
2019/04/25 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
一起来了解一下JavaScript的预编译(小结)
2021/03/01 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
Cython 三分钟入门教程
2009/09/17 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
PyCharm 设置SciView工具窗口的方法
2019/01/15 Python
python如何读取bin文件并下发串口
2019/07/05 Python
python BeautifulSoup库的安装与使用
2020/12/17 Python
达拉斯牛仔官方商店:Dallas Cowboys Pro Shop
2018/02/10 全球购物
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
施华洛世奇中国官网:SWAROVSKI中国
2020/06/16 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
2014全国两会大学生学习心得体会
2014/03/10 职场文书
公司年会主持词
2014/03/22 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
关于环保的建议书
2014/05/12 职场文书
校庆标语集锦
2014/06/25 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
新闻稿件写作技巧
2015/07/18 职场文书
高三物理教学反思
2016/02/20 职场文书
财务会计个人原因辞职信
2019/06/21 职场文书