<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> *{margin:0;padding:0;} img{position:absolute;left:30px;top:100px;height:100px;} </style> <body> <img src ="../img/1.jpg" id = "img1"/> <script type="text/javascript"> window.onload = function(){ var oImg = document.getElementById('img1'); oImg.onclick = function(){ shake(this, 'left'); } var arr = []; for(var i = 20; i > 0 ; i-=2){ arr.push(i, -i); } arr.push(0); var num = 0; function shake(obj, attr, func){ clearInterval(obj.timer); obj.timer = setInterval( function(){ obj.style[attr] = parseInt(getStyle(obj, attr)) + arr[num] + 'px'; num++; if(num == arr.length){ clearInterval(obj.timer); func && func(); } },30 ); } function getStyle(obj, attr){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; } } </script> </body> </html>