需求说明：
使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小
随着鼠标的移动，实时计算鼠标与图片中心点的距离，在输入框中显示图片的缩放系数
放大倍数不超过3 倍，缩小不小于50%
实现思路：
- 在页面上编写输入框用于显示缩放系数，并使用<img>标签显示一幅图片
- 获取图片中心点的坐标
- 获取鼠标移动时的坐标
- 使用勾股定理计算出鼠标与图片中心点之间的距离
- 将距离转换为缩放系数并显示在输入框中
- 根据缩放系数改变<img> 标签的宽度和高度
实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div{ width: 100%; position: absolute; bottom: 0; text-align: center; } img{ width: 300px; height: 150px; } input{ text-align: center; position: absolute; } </style> </head> <body> <script type="text/javascript"> window.onload=function(){ var input=document.getElementById("input"); var div=document.getElementById("div"); var img=document.getElementById("img"); window.onmousemove=function(){ var x=img.offsetLeft + img.offsetWidth/2; console.log(x) var y=img.offsetTop + img.offsetHeight/2; console.log(y) var b=event.clientX-x; var a=event.clientY-y; var c=Math.sqrt(Math.pow(b,2)+Math.pow(a,2)); var scale=Math.floor(c)/100-1; if (scale<0.5) { scale=0.5; } else if(scale>3){ scale=3; } input.value=scale; img.style.width=scale*300+"px"; img.style.height=scale*150+"px"; }; }; </script> <p>图片缩放系数：<input type="text" id="input"/></p> <div id="div"> <img src="img/img_1.jpg" id="img"/> </div> </body> </html>
