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);
时间: 2025-01-08 01:39:13

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

纯css简单的警告框加抖动效果

这种效果的警告框,出错了会抖动 .alert-box { width: 400px; border-style: outset; position: relative; color:#555; border-radius:10px; font-family:Tahoma,Geneva,Arial,sans-serif;font-size:11px; padding:10px 10px 10px 10px; margin:auto; display: none; } .alert-box span

jq实现果冻抖动效果

jq代码实现的果冻抖动效果:http://www.huiyi8.com/js/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

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

仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling> 属性返回被选节点的下一个同级节点(在相同树层级中的下一个节点). 如果不存在这样的节点,则该属性返回 null.//元素节点的节点类型是 1  obj.previousSibling.nodeType ==1; reverse() 方法用于颠倒数组中元素的顺序. push() 方法可向数组的末尾添加一个

基于jquery多种切换效果的焦点图(兼容ie6)

随着html5和css3的诞生.各种非常酷.非常炫的网页焦点图在各个前端技术网上满天飞.基于html5和css3技术的焦点图有一个弊端就是要在ie9以上才支持.这让需兼容ie6到ie8的页面又爱又恨.下面为大家介绍一款完全基于juery的焦点图,而且这款插件完美支持ie6,多种百叶窗切换,效果还是相当赏目的.无图无真相,还是先上图 点击这里在线预览 点击这里下载源码 使用教程 这款插件代码很简洁,使用也非常简单.看截图 ok.今天就和大家分享到这里.周末好快,作为一名码农真是苦逼,明天还要早起,

jQuery之动画效果show()......animate()

jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow","normal","fast" callback可选,为当动画完成时执行的函数.   show(speed,[easing],callback) Number/String easing默认是swing,可选linear; $("#div1&qu

jquery的动画效果

序言:昨天复习了jQuery的一些事件,今天我打算继续来复习jQuery的动画效果. 用于写一些网页特效:渐变菜单,渐变显示,图片轮播等. 首先当然得引入插件:<script src="jquery/jquery-1.11.1.js"></script> 1.简单的HTML代码 <input type="button" value="show" id="btn1"/><input ty

android 实现带清除效果的EditText(附带抖动效果)

Android一直没有提供类似于ios中自带清除效果的输入框(ios只要只要添加属性即可实现),所以在Android当中 想要实现此效果就需要使用自定义控件的方式实现. 思路:可以使用一个Linearlayout里面横向布局一个EditText和一个删除的图片,监听输入框的焦点和文字变化,设置图片的显隐和点击清除事件.但是这么做些弊端,首先增加了UI布局的层级结构不利于UI结构的优化而且可能会出现文字过长遮挡住图片的情况.所以采用自定义控件继承于EditText,使用getCompoundDra

Jquery 图片走马灯效果原理

本篇只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 照例先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;" title="清灵少女宛如梦境仙女"><a

振动和抖动效果

1.得到系统的振动器 Vibrator vibrator = (Vibrator) getSystemService(VIBRATOR_SERVICE); 2.设置振动时间 vibrator.vibrate(500); // vibrator.vibrate(1000); // long[] pattern = new long[]{300,500,700,900}; //pattern 震动变化的时间段 //repeat 从pattern的哪个数组下标开始震动 // vibrator.vibr