<!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>