jQuery实现抖动效果
//抖动效果
//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实现抖动效果的更多相关文章
- jquery 实现抖动效果
jQuery.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDurat ...
- Jquery实现的图标抖动效果
原文:http://www.webdm.cn/webcode/75de64a9-3fb4-473d-bc2c-97a0a063be79.html <!DOCTYPE html PUBLIC &q ...
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- iOS 为视图添加抖动效果
抖动效果在开发中比较少用到,不过有时使用了确有个很好的装逼效果,用的时候就例如一些用户错误操作之类的 效果如下,不过gif看到的效果没实际的好看 上代码 - (void)shakeAnimationF ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- JQuery实现广告效果(滚动切换)
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- 让DIV实现抖动效果!
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- 公测后,微信小程序应用可能被拒原因.
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 34.0px "PingFang SC Semibold"; color: #23232 ...
- Swift基础语法 、 元组(Tuple)
字符串的使用 1.1 问题 Swift的String和Character类型提供了一个快速的,兼容Unicode的方式来处理代码中的文本信息.创建和操作字符串的语法与C语言中字符串类似.本案例将学习如 ...
- 使用Timer类的两个实例 动态时钟
package chapter16; import javax.swing.*; import chapter15.StillClock; import java.awt.event.*; publi ...
- 机器学习(一) 从一个R语言案例学线性回归
写在前面的话 按照正常的顺序,本文应该先讲一些线性回归的基本概念,比如什么叫线性回归,线性回规的常用解法等.但既然本文名为<从一个R语言案例学会线性回归>,那就更重视如何使用R语言去解决线 ...
- kernel/module.c
#include <linux/errno.h>#include <linux/kernel.h>#include <asm/segment.h>#include ...
- ios/iphone手机请求微信用户头像错位BUG及解决方法
转:http://www.jslover.com/code/527.html ios/iphone手机请求微信用户头像错位BUG及解决方法 发布时间:2014-12-01 16:37:01 评论数:0 ...
- 论文阅读之:Photo-Realistic Single Image Super-Resolution Using a Generative Adversarial Network
Photo-Realistic Single Image Super-Resolution Using a Generative Adversarial Network 2016.10.23 摘要: ...
- TestDisk 恢复rm -rf 的文件
Linux操作系统下使用TestDisk恢复已删除的文件或目录 原创作者:szyzln/2015.10.16 转载需注明原始出处! 说明: testdisk和photorec是著名的恢复数据,而绝 ...
- Python学习笔记——Day3
Python字典(Dictionary) 字典是一种可变容器模型,可存储任意类型对象. 字典的每个键值(key => value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花 ...
- Android画图Path的使用
/** * Paint类介绍 * * Paint即画笔,在绘图过程中起到了极其重要的作用,画笔主要保存了颜色, * 样式等绘制信息,指定了如何绘制文本 ...