使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

查看本章节

查看作业目录

需求说明：

使用JavaScript 中的Math对象和勾股定理公式，计算鼠标的位置与页面图片中心点的距离，根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大，距离近时图片缩小

  • 随着鼠标的移动，实时计算鼠标与图片中心点的距离，在输入框中显示图片的缩放系数
  • 放大倍数不超过3 倍，缩小不小于50%

实现思路：

  1. 在页面上编写输入框用于显示缩放系数，并使用<img>标签显示一幅图片
  2. 获取图片中心点的坐标
  3. 获取鼠标移动时的坐标
  4. 使用勾股定理计算出鼠标与图片中心点之间的距离
  5. 将距离转换为缩放系数并显示在输入框中
  6. 根据缩放系数改变<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>

 

posted @ 2020-11-06 10:09  明金同学  阅读(35)  评论(0)  编辑  收藏  举报