HTML
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511501753&di=af2dc05f9decb517801a91b49a26bd18&imgtype=jpg&er=1&src=http%3A%2F%2Fww1.sinaimg.cn%2Fthumb300%2F9651d910gw1f8f9266axhj20p00e2jtd.jpg"/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511501753&di=af2dc05f9decb517801a91b49a26bd18&imgtype=jpg&er=1&src=http%3A%2F%2Fww1.sinaimg.cn%2Fthumb300%2F9651d910gw1f8f9266axhj20p00e2jtd.jpg"/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511501753&di=af2dc05f9decb517801a91b49a26bd18&imgtype=jpg&er=1&src=http%3A%2F%2Fww1.sinaimg.cn%2Fthumb300%2F9651d910gw1f8f9266axhj20p00e2jtd.jpg"/>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1511501753&di=af2dc05f9decb517801a91b49a26bd18&imgtype=jpg&er=1&src=http%3A%2F%2Fww1.sinaimg.cn%2Fthumb300%2F9651d910gw1f8f9266axhj20p00e2jtd.jpg"/>
CSS
*{
margin: 0;
padding: 0;
}
img{
width: 100px;
height: 100px;
position: absolute;
left: 10px;
top: 100px;
}
img:nth-of-type(2){
left: 150px;
}
img:nth-of-type(3){
left: 300px;
}
img:nth-of-type(4){
left: 450px;
}
JS
var aImg=document.getElementsByTagName("img");
for (var i=0;i<aImg.length;i++) {
shake(aImg[i],"top");
}
//函数封装
function shake(obj,attr){
//生成数组[20,-20,18,-18,16,-16,14,-14,12,-12,10,-10,8,-8,6,-6,4,-4,2,-2,0,-0]
var arr=[];
for (var i=22;i>1;i--) {
arr.push(i-2,-(i-2));
}
obj.num=0;
var num=parseInt(getStyle(obj,attr));
obj.οnclick=function(){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var attr1=num+arr[obj.num];
if(obj.num>arr.length-1){
clearInterval(obj.timer);
obj.num=0;
}
obj.style[attr]=attr1+"px";
obj.num++;
},30)
}
}
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj)[attr];
}
}