mac停靠栏动画

MAC停靠栏

GIF
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				overflow: hidden;
			}
			#wrap{
				position: absolute;
				bottom: 0;
				left: 0;
				 100%;
				text-align: center;
			}
			#wrap > img{
				 64px;
			}


		</style>
		<script type="text/javascript">
			window.onload=function(){
				var r=128;
				var imgNodes=document.querySelectorAll("#wrap > img");
				
				document.onmousemove=function(ev){
					ev=ev ||event;
					// alert(12);
					for(var i = 0;i<imgNodes.length;i++){
						// 获取图片到鼠标的垂直距离
						var a=imgNodes[i].getBoundingClientRect().left + imgNodes[i].offsetWidth/2 - ev.clientX;
						// 获取图片到鼠标的水平距离
						var b=imgNodes[i].getBoundingClientRect().top + imgNodes[i].offsetHeight/2 - ev.clientY;
						// 获取图片到鼠标的直线距离
						var c=Math.sqrt(a*a+b*b);
						
						if(c>=r){
							c=r;
						}
						
						imgNodes[i].style.width=128 - c*0.5 +"px";
					}
				}
				
			}
		</script>
	</head>
	<body>
		<dic id="wrap">
			<img src="images/1.png" alt="">
			<img src="images/2.png" alt="">
			<img src="images/3.png" alt="">
			<img src="images/4.png" alt="">
			<img src="images/5.png" alt="">
		</dic>
		
	</body>
</html>