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代码
Nov 09 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
vue-prop父组件向子组件进行传值的方法
Mar 01 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
Mar 02 Javascript
webpack4的迁移的使用方法
May 25 Javascript
vue2.0基于vue-cli+element-ui制作树形treeTable
Apr 30 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
vue父子组件的通信方法(实例详解)
Nov 10 Javascript
JS实现简单的表格增删
Jan 16 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
人大复印资料处理程序_输入篇
2006/10/09 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
javascript实现无缝上下滚动特效
2015/12/16 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
2016/06/08 Javascript
关于在Servelet中如何获取当前时间的操作方法
2016/06/28 Javascript
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
vue.js打包之后可能会遇到的坑!
2018/06/03 Javascript
node中的cookie的具体使用
2018/09/13 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
[10:18]2018DOTA2国际邀请赛寻真——Fnatic能否笑到最后?
2018/08/14 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python中偏函数用法示例
2018/06/07 Python
Python 数值区间处理_对interval 库的快速入门详解
2018/11/16 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python ChainMap的使用和说明详解
2019/06/11 Python
python爬虫selenium和phantomJs使用方法解析
2019/08/08 Python
python使用hdfs3模块对hdfs进行操作详解
2020/06/06 Python
纯CSS3实现带动画效果导航菜单无需js
2013/09/27 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Html5大文件断点续传实现方法
2015/12/05 HTML / CSS
入党思想汇报怎么写
2014/04/03 职场文书
美容院店长岗位职责
2014/04/08 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
楚门的世界观后感
2015/06/03 职场文书
python代码实现备忘录案例讲解
2021/07/26 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript