代码如下：
<!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>