js实现放大镜

最新推荐文章于 2022-02-09 21:40:34 发布

Shaozia

最新推荐文章于 2022-02-09 21:40:34 发布

阅读量109

点赞数

本文链接：https://blog.csdn.net/Shaozia/article/details/104579234

版权

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box{
			width: 350px;
			height: 350px;
			border: 1px solid #000;
			margin: 200px;
			position: relative;
		}
		#big{
			width: 400px;
			height: 400px;
			border: 1px solid #000;
			overflow: hidden;
			position: absolute;
			top:0;
			left : 360px;
			display: none;
		}
		#mask{
			width: 175px;
			height: 175px;
			background: paleturquoise;
			position: absolute;
			left:0;
			top: 0;
			opacity: 0.3;
			display: none;
			cursor: move;
		}
		#small{
			position: relative;
		}
		#bigImg{
			position: absolute;
			left: 0;
			top: 0;
		}
	</style>
	<body>
		<div id="box" >
			<div id="small"><!--小图区-->
				<img src="../day19/Day19/2放大镜/001.jpg" alt="" />
				<div id="mask"></div><!--遮罩层-->
			</div>
			<div id="big"><!--大图区-->
				<img src="../day19/Day19/2放大镜/0001.jpg" alt="" id="bigImg"/>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	// bigImgLeft / x = (大图的宽度-大图可视区宽度)/(小图宽度-mask的宽度) = 大图宽度/小图宽度 = 大图可视区宽度 / 小图可视区（mask）宽度
	var box = document.getElementById("box");
	// 小图显示区
	var small = document.getElementById("small");
	// 遮罩层
	var mask = document.getElementById("mask");
	// 大图显示区
	var big = document.getElementById("big");

	var bigImg = document.getElementById("bigImg");

    // 给box一个鼠标移动到box就触发的事件
	box.onmouseover = function () {
		// 当鼠标移动到box上的时候，遮罩层应该显示
		mask.style.display = "block";
		// 当鼠标移动到box上的时候，大图显示区也应该显示
		big.style.display = "block";
	}

	box.onmouseout = function () {
		// 当鼠标移开到box外的时候，遮罩层应该隐藏
		mask.style.display = "none";
		// 当鼠标移开到box外的时候，大图显示区也应该隐藏
		big.style.display = "none";
	}

	box.onmousemove = function (eve) {
		eve = eve || event;
		// 这里的small的大小是和box的大小是一样的
		// x拿到的是mask相对于box的left的距离
		// this.offsetLeft指的是box左边距离浏览器的距离
		// mask.offsetWidth还mask自身包括边框的宽度
		var x = eve.clientX - this.offsetLeft - mask.offsetWidth / 2;
		var y = eve.clientY - this.offsetTop - mask.offsetHeight / 2;
		// 这个时候的遮罩区可以在box以外的区域跟随着鼠标的移动去移动，会跑出box的外面
		// 所以要做一个条件判断，限制一个可移动的宽度的最大值和可移动高度的最大值
		// 可移动宽度的最大值就是box的宽（不包括box的边框）减去mask的宽度（包括mask的边框）
		var maxL = this.clientWidth - mask.offsetWidth;
		var maxT = this.clientHeight - mask.offsetHeight;

        // 利用三目运算做一个判断，当移动的距离小于0的时候，就直接置位0（相当于没移动）
		// 当移动产生距离的时候，判断这个距离如果超出了最大值，就直接把最大值赋值给x
		x < 0 ? x = 0 : (x > maxL ? x = maxL : x = x);
		y < 0 ? y = 0 : (y > maxL ? y = maxL : y = y);
		mask.style.left = x + "px";
		mask.style.top = y + "px";

        var imgLeft = (bigImg.clientWidth - big.offsetWidth) / (box.clientWidth - mask.offsetWidth) * x;
		var imgTop = (bigImg.clientHeight - big.offsetHeight) / (box.clientHeight - mask.offsetHeight) * y;

		bigImg.style.left = -imgLeft + "px";
		bigImg.style.top =  -imgTop + "px"; 

		return false; 

	}

	
</script>

Shaozia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js实现放大镜

html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0; padding: 0; }...
复制链接

扫一扫