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 异步调用框架 (Part 2 - 用例设计)
Aug 03 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
用jquery修复在iframe下的页面锚点失效问题
Aug 22 Javascript
jQuery中:eq()选择器用法实例
Dec 29 Javascript
JavaScript中Cookie操作实例
Jan 09 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
Feb 20 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
JavaScript中创建原子的方法总结
Aug 26 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
javascript实现文本框标签验证的实例代码
Oct 14 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
详谈PHP编码转换问题
2015/07/28 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
Opacity.js
2007/01/22 Javascript
将jQuery应用于login页面的问题及解决
2009/10/17 Javascript
用nodejs的实现原理和搭建服务器(动态)
2016/08/10 NodeJs
js enter键激发事件实例代码
2016/08/17 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
2016/09/19 Javascript
JSON与String互转的实现方法(Javascript)
2016/09/27 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
微信小程序 监听手势滑动切换页面实例详解
2017/06/15 Javascript
详解如何构建Angular项目目录结构
2017/07/13 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
Vue实现简单计算器
2021/01/20 Vue.js
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
python发送邮件示例(支持中文邮件标题)
2014/02/16 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
Python实现模拟时钟代码推荐
2015/11/08 Python
python3实现抓取网页资源的 N 种方法
2017/05/02 Python
Python的语言类型(详解)
2017/06/24 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
python Pandas如何对数据集随机抽样
2019/07/29 Python
python将字母转化为数字实例方法
2019/10/04 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python约瑟夫生者死者小游戏实例讲解
2021/01/04 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
美国办公用品购物网站:Quill.com
2016/09/01 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
迟到检讨书5000字
2014/01/31 职场文书
公司营业员的自我评价
2014/03/04 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python
使用Python通过企业微信应用给企业成员发消息
2022/04/18 Python