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 相关文章推荐
Ajax同步与异步传输的示例代码
Nov 21 Javascript
js对象内部访问this修饰的成员函数示例
Apr 27 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
angularjs实现与服务器交互分享
Jun 24 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
Jun 26 Javascript
JavaScript中字符串(string)转json的2种方法
Jun 25 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
Vue.js如何实现路由懒加载浅析
Aug 14 Javascript
在vue里使用codemirror遇到的问题
Nov 01 Javascript
Nest.js散列与加密实例详解
Feb 24 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
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Yii2学习笔记之汉化yii设置表单的描述(属性标签attributeLabels)
2017/02/07 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
PHP实现的mysql读写分离操作示例
2018/05/22 PHP
学习YUI.Ext 第四天--对话框Dialog的使用
2007/03/10 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
使用jquery修改表单的提交地址基本思路
2014/06/04 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
javascript实现表格增删改操作实例详解
2015/05/15 Javascript
基于jquery实现日历签到功能
2020/09/11 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
关于微信上网页图片点击全屏放大效果
2016/12/19 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
vue移动端实现红包雨效果
2020/06/23 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
vue更改数组中的值实例代码详解
2020/02/07 Javascript
JavaScript实现动态留言板
2020/03/16 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
ipython jupyter notebook中显示图像和数学公式实例
2020/04/15 Python
Django ForeignKey与数据库的FOREIGN KEY约束详解
2020/05/20 Python
python中np是做什么的
2020/07/21 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
Banana Republic欧盟:美国都市简约风格的代表品牌
2018/05/09 全球购物
体育教师自我鉴定
2014/02/12 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
当幸福来敲门观后感
2015/06/01 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
html实现随机点名器的示例代码
2021/04/02 Javascript
Jupyter Notebook内使用argparse报错的解决方案
2021/06/03 Python
python字典进行运算原理及实例分享
2021/08/02 Python