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架构javascript基础体系
Jan 01 Javascript
使图片旋转的3种解决方案
Nov 21 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
解决JS组件bootstrap table分页实现过程中遇到的问题
Apr 21 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
Angular的$http与$location
Dec 26 Javascript
通过一次报错详细谈谈Point事件
May 17 Javascript
vue中各种通信传值方式总结
Feb 14 Javascript
axios+Vue实现上传文件显示进度功能
Apr 14 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 MVC留言本实例代码(必看篇)
2016/09/22 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Prototype最新版(1.5 rc2)使用指南(1)
2007/01/10 Javascript
Jquery CheckBox全选方法代码附js checkbox全选反选代码
2010/06/09 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
javascript原型模式用法实例详解
2015/06/04 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
2020/04/23 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
关于Vue的路由权限管理的示例代码
2018/03/06 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
vue watch关于对象内的属性监听
2019/04/22 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
python不带重复的全排列代码
2013/08/13 Python
python实现反转部分单向链表
2018/09/27 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
matplotlib.pyplot绘图显示控制方法
2019/01/15 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python selenium 弹出框处理的实现
2019/02/26 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
python脚本第一行如何写
2020/08/30 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
俄罗斯游戏商店:Buka
2020/03/01 全球购物
static关键字的用法
2013/10/07 面试题
思想政治自我鉴定
2013/10/06 职场文书
家长评语大全
2014/01/22 职场文书
司仪主持词两篇
2014/03/22 职场文书
公司合作协议书范本
2014/04/18 职场文书
《鲁班和橹板》教学反思
2014/04/27 职场文书
2014年度考核工作总结
2014/12/24 职场文书
房产公证书
2015/01/23 职场文书
nginx 防盗链防爬虫配置详解
2021/03/31 Servers
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
MySQL RC事务隔离的实现
2022/03/31 MySQL