图片抖动的效果（修改后）

最新推荐文章于 2024-07-21 09:00:00 发布

liang_star

最新推荐文章于 2024-07-21 09:00:00 发布

阅读量1.6k

点赞数

分类专栏：学习笔记

本文链接：https://blog.csdn.net/liang_star/article/details/53522972

版权

学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

	<script>
		window.οnlοad=function(){
			var box=document.getElementById("box");
			for( var i=1;i<9;i++){
			box.innerHTML+="<img class='img' src='image/"+i+".jpg'>";
			}
			var aImg=box.getElementsByTagName("img");
			var ops=0;
			var first=true;
			for(var j=0;j<aImg.length;j++){
				aImg[j].style.left=100+j*110+'px';

				aImg[j].οnmοuseοver=function(){
					
				shake(this,"top");	}
				}
				
				function shake(obj,attr,endFn){
					if(first){
					first=false;
					var arr=[];
					var num=0;
					pos=parseInt(getStyle(obj,attr));	//有隐患
					for(var i=20;i>0;i=i-2){arr.push(i,-i);}
					clearInterval(obj.timer1);
					obj.timer1=setInterval(function(){
					obj.style[attr]=pos+arr[num]+"px";
					num++;
					if(num==arr.length){clearInterval(obj.timer1);
					endFn&&endFn();}
					},50)
				}else{
					var arr=[];
					var num=0;
					//var pos=parseInt(getStyle(obj,attr));	//有隐患
					for(var i=20;i>0;i=i-2){arr.push(i,-i);}
					clearInterval(obj.timer1);
					obj.timer1=setInterval(function(){
					obj.style[attr]=pos+arr[num]+"px";
					num++;
					if(num==arr.length){clearInterval(obj.timer1);
					endFn&&endFn();}
					},50)
				}
				
			}
			function getStyle(obj,attr){
			return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
			}
		
		}
	</script>