多组抖动效果的图片js封装
昨天提到了单个图片的抖动效果，那么今天来写一下多组图片实现抖动效果的封装，这种效果也许在日常的项目中会用到，简单封装一下，就不用每次都写差不多一样的代码了，好的来看html和css的布局，其实很简单就是两张图片：
<style> img{position:absolute; top:200px; left:300px; width:180px;} #img1{left:560px;} </style> <body> <!--需求：点击图片，图片会抖动几下--> <img id="img" width="180" src="img/pic1.jpg"/> <img id="img1" width="180" src="img/pic2.jpg"/> </body>
js代码如下：
<script>
//兼容不同浏览器获取行间样式
function getStyle ( obj, attr ) {
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
}
window.onload=function(){
//第一步先追加多个div
var oImg=document.getElementById("img");
var oImg1=document.getElementById("img1");
//添加点击事件
oImg.onclick=fn;
oImg1.onclick=fn;
//两个点击效果相同，那么就可以重用代码了
function fn(){
var _this=this;
shake(_this,'left',function(){//这里的回调函数实现的效果就是上下抖动
shake(_this,'top'); //注意：若没有任何声明的情况下，回调函数里不能直接用this,所以 _this=this不能少
})
}
//抖动效果的代码封装需要的参数也就是对象，方向，回调函数
function shake(obj,attr,endFn){
var pos=parseFloat(getStyle(obj,attr));
var arr=[];
var num=0;
var timer=null;
//抖动频率de数组，一正一负[20,-20,18,-18...]
for(var i=20;i>0;i-=2){
arr.push(i,-i)
}
arr.push(0);
//启用定时器前先关闭定时器
clearInterval(obj.timer);
obj.timer=setInterval(function(){
//让图片的left跟随数组里的值变化就会实现左右移动效果
obj.style[attr]=pos+arr[num]+"px";
num++;
if(num===arr.length){
clearInterval(obj.timer);
endFn && endFn();
}
},50)
}
};
</script>
好了，就是这样了，我写的比较啰嗦，也是希望看的比较明白，这只是两张图片点击之后的抖动效果，若是多组也是适用的，当然对于其他对象，比如说表单等等也都试用，还是那句话万变不离其宗，可以多试试！
好了，今天就到这里了！加油！
