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 相关文章推荐
js 中 document.createEvent的用法
Aug 29 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 Javascript
javascript实现标签切换代码示例
May 22 Javascript
js实现统计字符串中特定字符出现个数的方法
Aug 02 Javascript
Angular和百度地图的结合实例代码
Oct 19 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
JS实现的JSON序列化操作简单示例
Jul 02 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
PHP读取xml方法介绍
2013/01/12 PHP
php从文件夹随机读取文件的方法
2015/06/01 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
js 链式延迟执行DOME
2012/01/04 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
Node.js 数据加密传输浅析
2016/11/16 Javascript
bootstrap实现的自适应页面简单应用示例
2017/03/09 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
微信小程序实现提交input信息到后台的方法示例
2019/01/19 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
vue-cli中使用高德地图的方法示例
2019/03/28 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
Python通过递归遍历出集合中所有元素的方法
2015/02/25 Python
Python编程生成随机用户名及密码的方法示例
2017/05/05 Python
matplotlib中legend位置调整解析
2017/12/19 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
浅谈Python 多进程默认不能共享全局变量的问题
2019/01/11 Python
python从子线程中获得返回值的方法
2019/01/30 Python
python交易记录整合交易类详解
2019/07/03 Python
python如何构建mock接口服务
2021/01/28 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
数以千计的折扣工业产品:ESE Direct
2018/05/20 全球购物
2014年幼儿园植树节活动方案
2014/03/02 职场文书
学校党员对照检查材料
2014/08/28 职场文书
部门主管竞聘书
2015/09/15 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Redis之RedisTemplate配置方式(序列和反序列化)
2022/03/13 Redis
Go语言特点及基本数据类型使用详解
2022/03/21 Golang