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 AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
jQuery 技巧大全(新手入门篇)
May 12 Javascript
javascript json2 使用方法
Mar 16 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
jQuery中extend函数简单用法示例
Oct 11 jQuery
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
如何使用CSS3+JQuery实现悬浮墙式菜单
Jun 18 jQuery
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
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
php中的登陆login实例代码
2016/06/20 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
php实现统计IP数及在线人数的示例代码
2020/07/22 PHP
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
JavaScript中的值是按值传递还是按引用传递问题探讨
2015/01/30 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
javascript实现日期按月份加减
2015/05/15 Javascript
原生javascript实现的一个简单动画效果
2016/03/30 Javascript
如何使用headjs来管理和异步加载js
2016/11/29 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
2019/02/12 Javascript
javascript中导出与导入实现模块化管理教程
2020/12/03 Javascript
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
python实现数据库跨服务器迁移
2018/04/12 Python
wxPython的安装与使用教程
2018/08/31 Python
Python开发虚拟环境使用virtualenvwrapper的搭建步骤教程图解
2018/09/19 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
Python批量查询关键词微信指数实例方法
2019/06/27 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
行政部总经理岗位职责
2014/01/04 职场文书
公司成本主管岗位责任制
2014/02/21 职场文书
教师求职自荐信
2014/03/09 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
请假条范文大全
2014/04/10 职场文书
项目建议书模板
2014/05/12 职场文书
领导干部对照检查材料
2014/08/24 职场文书
财务会计实训报告
2014/11/05 职场文书
生产车间主任岗位职责
2015/04/08 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书