当前位置: 首页 > 编程笔记 >

jQuery通过扩展实现抖动效果的方法

阴元青
2023-03-14
本文向大家介绍jQuery通过扩展实现抖动效果的方法,包括了jQuery通过扩展实现抖动效果的方法的使用技巧和注意事项,需要的朋友参考一下

本文实例讲述了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程序设计有所帮助。

 类似资料:
  • 本文向大家介绍jQuery实现网页抖动的菜单抖动效果,包括了jQuery实现网页抖动的菜单抖动效果的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现网页抖动的菜单抖动效果。分享给大家供大家参考。具体如下: 这里的jQuery抖动导航菜单效果,兼容IE7/8/9及其它主流浏览器,使用方法:先引入jQuery脚本库和jquery.shake.js文件,然后在需要的元素上调用sha

  • 本文向大家介绍JS实现简单抖动效果,包括了JS实现简单抖动效果的使用技巧和注意事项,需要的朋友参考一下 废话不多说了,直接给大家贴代码了,具体代码如下所示: 好了,代码到此结束,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的,在此也非常感谢大家对呐喊教程网站的支持!

  • 本文向大家介绍jQuery模拟窗口抖动效果,包括了jQuery模拟窗口抖动效果的使用技巧和注意事项,需要的朋友参考一下 效果图: 代码如下: 以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持呐喊教程!

  • 本文向大家介绍基于jQuery实现动态数字展示效果,包括了基于jQuery实现动态数字展示效果的使用技巧和注意事项,需要的朋友参考一下 我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery实现动态数字展示效果。 查看演示 下载源码 HTML代码 本例假设要在页面上动态展示(无需刷新整个页面,只是局

  • 本文向大家介绍iOS实现抖音点赞动画效果,包括了iOS实现抖音点赞动画效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了iOS实现抖音点赞动画的具体代码,供大家参考,具体内容如下 1. 概述 最近看到抖音点赞爱心的动画效果比较好,出于好奇,自己也研究仿照动画效果写了一个,不喜欢的朋友可不要喷我噢!!! 话不多说,先来看一下执行效果。 2. 动画分析 上面的示例效果有点快,现在来看一

  • 本文向大家介绍jQuery实现点击图片翻页展示效果的方法,包括了jQuery实现点击图片翻页展示效果的方法的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了jQuery实现点击图片翻页展示效果的方法。分享给大家供大家参考。具体实现方法如下: 希望本文所述对大家的jQuery程序设计有所帮助。