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 模式设计之工厂模式详细说明
May 10 Javascript
让ie6也支持websocket采用flash封装实现
Feb 18 Javascript
jquery高级编程的最佳实践详解
Mar 23 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
js实现网站最上边可关闭的浮动广告条代码
Sep 04 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
BootStrap下拉菜单和滚动监听插件实现代码
Sep 26 Javascript
js实现界面向原生界面发消息并跳转功能
Nov 22 Javascript
js窗口震动小程序分享
Nov 28 Javascript
Express框架之connect-flash详解
May 31 Javascript
javaScript中封装的各种写法示例(推荐)
Jul 03 Javascript
Vue源码解析之数据响应系统的使用
Apr 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
php 生成WML页面方法详解
2009/08/09 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
php json相关函数用法示例
2017/03/28 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
javascript点击按钮实现隐藏显示切换效果
2016/02/03 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
详解nodejs中exports和module.exports的区别
2017/02/17 NodeJs
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
ReactNative列表ListView的用法
2017/08/02 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
浅谈vue加载优化策略
2019/03/19 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Element DateTimePicker日期时间选择器的使用示例
2020/07/27 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
使用python实现链表操作
2018/01/26 Python
Python多进程原理与用法分析
2018/08/21 Python
python实现文件的备份流程详解
2019/06/18 Python
python语言是免费还是收费的?
2020/06/15 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
html5指南-5.使用web storage存储键值对的数据
2013/01/07 HTML / CSS
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
创业计划书六个要素
2013/12/26 职场文书
升旗仪式主持词
2014/03/19 职场文书
小学教学工作总结2015
2015/05/13 职场文书
我的1919观后感
2015/06/03 职场文书
色戒观后感
2015/06/12 职场文书
解决Python保存文件名太长OSError: [Errno 36] File name too long
2022/05/11 Python