MAC dock
<!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;
width: 100%;
text-align: center;
}
#wrap > img{
width: 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>