代码如下:

<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
position: absolute;
left: 400px;
top: 200px;
background: red;
}
</style>
</head> <body>
<div id="div1"></div> <script>
var div1 = document.querySelector('#div1'); document.onclick = function() { /*
* 抖动:
* 1. 每次改变一下元素的位置
* 按照一个中心点进行偏移,假设中心点left原始是400,那么每次就以left:400为中心做位置的移动
* 380 -> 420
* */ // div1.style.left = '380px';
// div1.style.left = '420px'; var a = true; setInterval(function() { /*
* 根据a的值,做不同的设置
* */
div1.style.left = (a ? 380 : 420) + 'px';//这样可以实现小幅度的抖动效果,但是大幅度的抖动就会显得很生硬
            
a = !a; }, 30); }
      /*缓动代码*/
      var tween = {
      linear:function(t,b,c,d){
      return c*t/d + b;
      },
      easeIn:function(t,b,c,d){
      return c * ( t /= d ) * t + b;
      },
      strongEaseIn:function(t,b,c,d){
      return c * ( t /= d ) * t * t * t * t + b;
      },
      strongEaseOut:function(t,b,c,d){
      return c * ( ( t = t / d -1 ) * t * t * t * t +1 ) + b;
      },
      sineaseIn:function(t,b,c,d){
      return c * ( t /= d ) * t * t + b;
      },
      sineaseOut:function(t,b,c,d){
      return c * ( ( t = t / d -1 ) * t * t *t +1 ) + b;
      }
      };       var Animate = function(dom){
      this.dom = dom;
      this.startTime = 0;
      this.startPos = 0;
      this.endPos = 0;
      this.propertyName = null;
      this.easing = null;
      this.duration = null;
      }       Animate.prototype.start = function(propertyName,endPos,duration,easing){
      this.startTime = +new Date;
      this.startPos = this.dom.getBoundingClientRect()[propertyName];
      this.propertyName = propertyName;
      this.endPos = endPos;
      this.duration = duration;
      this.easing = tween[easing];       var self = this;
      var timeId = setInterval(function(){
      if(self.step() === false){
      clearInterval(timeId);
      }
      },19);
      }       Animate.prototype.step = function(){
      var t = +new Date;
      if(t>=this.startTime + this.duration){
      this.update(this.endPos);
      return false;
      }
       var pos = this.easing(t-this.startTime, this.startPos, this.endPos - this.startPos, this.duration);
      this.update(pos);
      }       Animate.prototype.update = function(pos){
      this.dom.style[this.propertyName] = pos + 'px';
      }
      var b = true;
      var div = document.getElementById('div');
      var animate = new Animate(div);
      setInterval(function() {
        animate.start('left',(a ? 380 : 420),1000,'strongEaseOut');//如果用缓动的效果来实现较大幅度的抖动,那视觉上就可以看到更舒适了
        a = !a;
      }, 30);
    </script> 

  </body> 

</html>

JS实现div的抖动:缓动式抖动的更多相关文章

  1. js多物体多方向缓动动画加带有回调机制

    一.获取一组div元素 var boxs = document.getElementsByTagName('div'); 二.封装获取属性值的函数 function getStyle(dom, att ...

  2. JS特效@缓动框架封装及应用

    | 版权声明:本文为博主原创文章,未经博主允许不得转载. 一.变量CSS样式属性获取/赋值方法 给属性赋值:(既能获取又能赋值) 1)div.style.width 单个赋值:点语法,这个方法比较固定 ...

  3. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  4. GSAP JS基础教程--使用缓动函数

    今天来了解一下缓动easeing函数. 开始,如果你还没有GSAP的类包,可以到GreenSock的官网去下载最新版本的类包,或者直接点击这里​来下载 学习之前,先来准备一下:     <!DO ...

  5. tween.js缓动(补间动画)

    一.理解tween.js 如果看到上面的已经理解了,可以跳过下面的部分.下面为对Tween.js的解释 下面就介绍如何使用这个Tween了,首先b.c.d三个参数(即初始值,变化量,持续时间)在缓动开 ...

  6. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  7. JS实现可用滑块滑动的缓动图

    尝试模仿京东的"发现好货"模块的可用滑块滑动的缓动图 JS代码 function $(id) { return document.getElementById(id); } //缓 ...

  8. 利用tween.js算法生成缓动效果

    在讲tween类之前,不得不提的是贝塞尔曲线了.首先,贝塞尔曲线是指依据四个位置任意的点坐标绘制出的一条光滑曲线.它在作图工具或动画中中运用得比较多,例如PS中的钢笔工具,firework中的画笔等等 ...

  9. animation js控制 缓动效果

    <!DOCTYPE html><html><head><meta charset="utf-8" /><title>缓动 ...

随机推荐

  1. linux locate命令

    1.命令简介         locate(locate) 命令用来查找文件或目录. locate命令要比find -name快得多,原因在于它不搜索具体目录,而是搜索一个数据库/var/lib/ml ...

  2. kubenetes master重启以后,服务异常排查

    k8s集群环境:三台机器,一台master,三个node(每台都安装node服务) 问题藐视:重启的时候,发现master的服务都能正常启动,但是就是不好使,看/var/log/message日志也没 ...

  3. python mysql 单表查询 多表查询

    一.外键 变种: 三种关系: 多对一 站在左表的角度: (1)一个员工 能不能在 多个部门? 不成立 (2)多个员工 能不能在 一个部门? 成立 只要有一个条件成立:多 对 一或者是1对多 如果两个条 ...

  4. 配置NTP网络时间自动校对系统时间和创建备份文件

    1 案例1:配置用户和组账号 1.1 问题 本例要求创建下列用户.组以及组的成员关系: 新建用户 alex,其用户ID为3456,密码是flectrag 创建一个名为 adminuser 的组 创建一 ...

  5. L1-016 查验身份证 (15 分)【考细心,考flag设置】

    一个合法的身份证号码由17位地区.日期编号和顺序编号加1位校验码组成.校验码的计算规则如下: 首先对前17位数字加权求和,权重分配为:{7,9,10,5,8,4,2,1,6,3,7,9,10,5,8, ...

  6. 让Delphi的TRichEdit支持新标准

    先说明, 不是直接让TRichedit支持, 而是派生出一个类支持 原理就是, IDE自带的richedit使用的是2.0版本(RICHEDIT20A/RICHEDIT20W), 这个版本虽然支持图片 ...

  7. Centos-7.4_安装_Redis_4.0.8

    一.安装redis 第一步:下载redis安装包 [root@Redis ~]# mkdir /usr/local/redis/ --创建目录 [root@Redis redis]# cd /usr/ ...

  8. Get all static wms goodlocation data

    sql function and store process: create function [dbo].[fun_splitin](@c varchar(),@split varchar()) r ...

  9. matlab中CRC的函数使用

    先学习一下matlab中CRC函数. 语法如下: h = crc.generator(‘Polynomial', polynomial, ‘param1', val1, etc.) 再看一个例子就比较 ...

  10. Linux shell编程:状态变量

    四大特殊状态变量:$?. $$. $!. $_ $?的作用是:获取执行上一个指令的执行状态返回值,返回0表示上一个命令或者程序执行成功,返回的值为非0则表示上一个命令执行失败. $$的作用是:获取当前 ...