<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body{margin: 0;}
#div1{ 100%; position: absolute; bottom: 0; text-align: center;}
</style>
<script type="text/javascript">
document.onmousemove=function (ev){ //doument下的鼠标移动事件
var oEvent=ev||event; //获取事件对象，并做兼容处理
var oDiv=document.getElementById('div1');
var aImg=document.getElementsByTagName('img'); //获取所以图片集合
var aTxt=document.getElementsByTagName('input'); //获取所有文本框集合
var i=0;
for(i=0; i<aImg.length; i++){
var x=aImg[i].offsetLeft+oDiv.offsetLeft+aImg[i].offsetWidth/2; //加上这个图片的一半宽度定位在中心点上
var y=aImg[i].offsetTop+oDiv.offsetTop+aImg[i].offsetHeight/2; //加上这个图片的一半高度定位在中心点上
//因为offsetLeft和offsetTop是取得距离父级的距离所以要加上oDiv距离页面的距离
var a=x-oEvent.clientX; //这个图片距离左侧的中心点坐标减去鼠标距离页面左侧的坐标
var b=y-oEvent.clientY; //这个图片距离顶部的中心点坐标减去鼠标距离页面顶部的坐标
var dis=Math.sqrt(a*a+b*b); //求得鼠标点距离图片中心点的距离 因为是一个直角三角形 求直角边也就是
var scale=1-dis/300; //求得需要缩放的比例 300是自定义的 可以根据不同的值得到的效果不一样
//dis/300会得到一个两头大中间小的倍数 所有两边的图片就回放大
//因为想要的效果是中间大两头小 所以要用1减去原先的倍数 得到想要的比例
//求比例就需要用到除法
if(scale<0.5){
scale=0.5;
}
//假如倍数过小的话 就是是图标消失 所以控制在0.5倍上
aImg[i].width=scale*200;
//让图片的宽度等于 倍数乘以最大宽度就会得到想要的宽度
aTxt[i].value=scale.toFixed(2);
}
}
</script>
</head>
<body>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<input type="text"></input>
<div id="div1">
<img src="images/image01.jpg" width="100" />
<img src="images/image02.jpg" width="100" />
<img src="images/image03.jpg" width="100" />
<img src="images/image04.jpg" width="100" />
<img src="images/image05.jpg" width="100" />
</div>
</body>
</html>