//抖动效果
//intShakes:抖动次数;intDistance:抖动左右距离;intDuration:持续时间
jQuery.fn.shake = function (intShakes, intDistance, intDuration) {
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;
}

使用:

$('#tishi').shake(3, 20, 400);

jQuery实现抖动效果的更多相关文章

  1. jquery 实现抖动效果

    jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDurat ...

  2. Jquery实现的图标抖动效果

    原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...

  3. CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果

    CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...

  4. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  5. iOS 为视图添加抖动效果

    抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...

  6. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  8. JQuery实现广告效果(滚动切换)

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  9. 让DIV实现抖动效果!

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

随机推荐

  1. 动态获取Android权限

    @TargetApi(23)private void showPhotoDialog() { if (dialog != null && dialog.isShowing()) { d ...

  2. ${param.origin}

    拦截器中设置未登录拦击跳转链接 response.sendRedirect(request.getContextPath() + "/loginAndRegister/loginAndReg ...

  3. firefox 不识别background-position-y / background-position-x

    火狐不识别background-position-y 或background-position-x; 案例: 页面: 背景图: 一列按钮,点击时让当前背景图的background-position-y ...

  4. Sublime Text 2 中文 GBK 规范的配置 暨 解决中文乱码问题 简述

    首先通过 Package Control 安装 ConverToUTF8 插件,但是每次新建一个文本后并不是默认使用 GBK,要设置默认使用 GBK,请继续看,然后我们 Ctrl + O 打开文件,在 ...

  5. linux和window下mkdir函数问题(转-锦曦月)

    通过WIN32宏进行判断   window下mkdir函数   #include<direct.h> int _mkdir( const char *dirname );   linux下 ...

  6. ios/iphone手机请求微信用户头像错位BUG及解决方法

    转:http://www.jslover.com/code/527.html ios/iphone手机请求微信用户头像错位BUG及解决方法 发布时间:2014-12-01 16:37:01 评论数:0 ...

  7. JAVA生成TXT日志文件

    /** * 生成日志文件(文件的位置在Tomcat的安装路径下) * @param str */ public static void LogForTXT(String str) { try { St ...

  8. Postgres 9.4 feature highlight: REPLICA IDENTITY and logical replication

    Among the many things to say about logical replication features added in PostgreSQL 9.4, REPLICA IDE ...

  9. [JBoss] - 在Jboss 7.1 AS中打印hibernate的SQL方法

    因为JBoss使用的是log4j,JBoss的系统日志级别默认是INFO.而Hibernate或IBatis要打印SQL,级别为DEBUG,所以,程序设置了log4j级别为DEBUG会被JBoss系统 ...

  10. [solr] - Facet - autocomplete

    Solr的facet可以用于一般性的前缀式自动完成功能,当然,它的主要功能是用于做统计.分类.区间等. 统计.分类.区间功能,可参考下文: http://hongweiyi.com/2013/03/a ...