鼠标划过根据距离缩放

最新推荐文章于 2022-04-01 15:10:42 发布

qianlingvip

最新推荐文章于 2022-04-01 15:10:42 发布

阅读量375

点赞数

本文链接：https://blog.csdn.net/zhangqling/article/details/85078801

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>苹果导航菜单</title>
	<style>
		*{
			padding: 0;
			margin:0;
		}
		div{
			position: absolute;
			bottom: 0;
			width: 100%;
			text-align: center;
		}
	</style>
	<script>
		document.onmousemove=function(ev){
			var oEvent=ev || event;
			var oDiv=document.getElementById("div1");
			var oImg=document.getElementsByTagName("img");
			var aText=document.getElementsByTagName("input");
			for (var i = 0; i < oImg.length; i++) {
				var x=oImg[i].offsetLeft+oImg[i].offsetWidth/2;
				var y=oDiv.offsetTop+oImg[i].offsetTop+oImg[i].offsetHeight/2;
				var a=x-oEvent.clientX;
				var b=y-oEvent.clientY;
				//求鼠标到图片中心距离
				var dis=parseInt(Math.sqrt(a*a+b*b));
				//缩放倍数，可以根据需求调节300大小
				var scale=1-dis/300;
				if (scale<0.5) {
					scale=0.5;
				}
				oImg[i].width=scale*128;
				aText[i].value=scale.toFixed(2);
			}
		}
	</script>
</head>
<body>
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<input type="text">
	<div id="div1">
		<img src="images/1.png" alt="" width="64">
		<img src="images/2.png" alt="" width="64">
		<img src="images/3.png" alt="" width="64">
		<img src="images/4.png" alt="" width="64">
		<img src="images/5.png" alt="" width="64">
	</div>
</body>
</html>

成品展示：