css:
}
#wrap img{
width:64px;
}
#wrap{
position: absolute;
bottom:0;
left:0;
width:100%;
text-align:center;
}
html:
<div id="wrap">
<img src="images/1.png"/>
<img src="images/2.png"/>
<img src="images/3.png"/>
<img src="images/4.png"/>
<img src="images/5.png"/>
</div>
js:
var r = 128;
var imgNode = document.querySelectorAll("#wrap img");
window.onmousemove = function(e){
e = e||event
var r = 128;
for(var i=0;i<imgNode.length;i++){
var a = imgNode[i].getBoundingClientRect().top + imgNode[i].offsetHeight - e.clientY; //getBoundingClientRect().top :相对于视口的距离
var b = imgNode[i].getBoundingClientRect().left + imgNode[i].offsetWidth - e.clientX;
var c = Math.sqrt(a*a+b*b); //c值为每个图标到鼠标位置的直线距离
if(c>r){
c=r;
}
imgNode[i].style.height= r -0.5*c+"px";//c值越小图标越大
imgNode[i].style.width= r -0.5*c+"px";
}
}