<!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>
