代码如下：

<!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. myeclipse使用git图文教程

    Git介绍与使用 1.什么是Git Git是分布式版本控制系统 Git是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 2.集中式版本控制系统(CVS / SVN等) 集中 ...

  2. Apache Flink系列（1）-概述

    一.设计思想及介绍 基本思想:“一切数据都是流,批是流的特例” 1.Micro Batching 模式 在Micro-Batching模式的架构实现上就有一个自然流数据流入系统进行攒批的过程,这在一定 ...

  3. 利用XPT2046制作一个电位器AD转换装置

    XPT2046是一款四线制电阻触摸屏控制芯片,内含12位分辨率125KHz转换速率逐步逼近型A/D转换器,支持从1.5V到5.25V的低电压I/O接口. 所谓逐步逼近型,就是输入一个模拟量,其与100 ...

  4. Linux：ftp服务本地用户，虚拟用户配置

    本地用户 1. 修改ftp配置文件,  anonymous_enable=NO   默认为YES,修改为NO,禁止匿名访问, 监听端口,可以根据自己的需求修改,为了安全起见自定义为好 2. /etc/ ...

  5. Android 一个日历控件的实现代码

    转载  2017-05-19   作者:Othershe   我要评论 本篇文章主要介绍了Android 一个日历控件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看 ...

  6. XML自学笔记

    1.    xml指可扩展标记语言,(extensible markup language),该语言被设计用来传输和存储数据,HTML被设计用来显示数据 XML标签没有被预定义,需要自定义标签:XML ...

  7. 构建Dubbo-2.0.7源码

    一. 下载源码: git clone --branch dubbo-2.0.7 https://github.com/apache/incubator-dubbo.git 二. 下载依赖 git cl ...

  8. SET || BZOJ 1588: [HNOI2002]营业额统计 || Luogu P2234 [HNOI2002]营业额统计

    题面:P2234 [HNOI2002]营业额统计 题解:随便写写 注意:cmath中abs函数返回的是一个浮点数,在bzoj上会ce 代码: #include<cstdio> #inclu ...

  9. js除法四舍五入

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

  10. Spring cloud 之Ribbon（二）负载均衡原理

    ribbon实现负载均衡的原理 我们从Ribbon实现负载均衡的代码可以看到,Ribbon是通过RestTemPlate实现客户端负载均衡的,准确的说是RestTemPlate上的@LoadBalan ...