<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
img{
width:100px;
height: 100px;
}
#div1{
position: absolute;
width: 100%;
bottom: 0;
height: auto;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
<img src="img/7.jpg"/>
<img src="img/8.jpg"/>
</div>
</body>
<script>
var oDiv = document.getElementById(‘div1‘);
var aImage = document.getElementsByTagName(‘img‘);
document.onmousemove = function(ev){
var event = ev || window.event;
for(var i=0;i<aImage.length;i++){
var x = aImage[i].offsetLeft +aImage[i].offsetWidth/2;
var y = aImage[i].offsetTop +aImage[i].offsetHeight/2+oDiv.offsetTop ;
var a = event.clientX - x;
var b = event.clientY - y;
var c = Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
var scale = 1.5-c/300;
if(scale<0.5){
scale = 0.5;
}
aImage[i].style.width = scale*200+‘px‘;
aImage[i].style.height = scale*200+‘px‘;
}
}
</script>
</html>
