js实现放大镜功能

功能概要

鼠标放入图片显式相对应的图片

具体效果

放大镜

代码思路：

获取相对应的元素
通过鼠标移动事件来获取放大图片
通过鼠标移动的坐标来获取相应的位置
来进行相对赢得位置的放大

具体代码：

• html

<div class="box" id="box">
	<div class="small">
		<!--小层-->
		<img src="images/small.png" width="350" alt="" />
		<div class="mask"></div>
		<!--遮挡层-->
	</div>
	<!--小图-->
	<div class="big">
		<!--大层-->
		<img src="images/big.jpg" width="800" alt="" />
		<!--大图-->
	</div>
	<!--大图-->
</div>

• css

		<style>
			* {
				margin: 0;
				padding: 0;
			}

			.box {
				width: 350px;
				height: 350px;
				margin: 100px;
				border: 1px solid #ccc;
				position: relative;
			}

			.big {
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				left: 360px;
				border: 1px solid #ccc;
				overflow: hidden;
				display: none;
			}

			.mask {
				width: 175px;
				height: 175px;
				background: rgba(255, 255, 0, 0.4);
				position: absolute;
				top: 0px;
				left: 0px;
				cursor: move;
				display: none;
			}

			.small {
				position: relative;
			}
		</style>

• js代码：

	<script>
			// 获取最外层div
			var box = document.getElementById("box")
			// console.log(box)
			
			// 获取小图div
			var small = box.children[0]
			// 获取遮挡层
			var mask = small.children[1]
			
			// 获取大图
			var big = box.children[1]
			// console.log(small,big,mask)
			
			// 获取大图的图片
			var bigImg = big.children[0]
			// 给box绑定鼠标的移入移出事件 控制mask遮挡层显示与隐藏
			box.onmouseover = function(){
				mask.style.display = "block"
				big.style.display = "block"
			}
			box.onmouseout = function(){
				mask.style.display = "none"
				big.style.display = "none"
			}
			// 鼠标的移动事件--鼠标是在小层上移动
			small.onmousemove = function(event){
				// 鼠标此时的可视区域的 x轴与y轴坐标
				var x = event.clientX - mask.offsetWidth/2
				var y = event.clientY - mask.offsetHeight/2
				console.log(x,y)
				// 为什么这里要减100
				x = x - 100
				y = y - 100
				
				//横坐标的最小值
				x = x < 0 ? 0 : x;
				//纵坐标的最小值
				y = y < 0 ? 0 : y;
				//横坐标的最大值
				x = x > small.offsetWidth - mask.offsetWidth ? small.offsetWidth - mask.offsetWidth : x;
				//纵坐标的最大值
				y = y > small.offsetHeight - mask.offsetHeight ? small.offsetHeight - mask.offsetHeight : y;
				// 调整遮挡层的位置
				mask.style.left = x+"px"
				mask.style.top = y+"px"
				//遮挡层的移动距离/大图的移动距离=遮挡层的最大移动距离/大图的最大移动距离
				//大图的移动距离=遮挡层的移动距离*大图的最大移动距离/遮挡层的最大移动距离
				// 大图的x轴最大移动距离
				var maxX = bigImg.offsetWidth - big.offsetWidth
				// 大图y轴
				var maxY = bigImg.offsetHeight - big.offsetHeight
				// 大图的横向移动坐标
				var bigImgX = x * maxX/(small.offsetWidth - mask.offsetWidth)
				var bigImgY = y * maxY/(small.offsetHeight - mask.offsetHeight)
				// 设置图片的移动 为什么要使用margin 而不是 定位
				bigImg.style.marginLeft = -bigImgX+"px"
				bigImg.style.marginTop = -bigImgY+"px"
			}
		</script>

以上是本节的内容，希望能帮助到你，以后也会持续更新，想了解更多，点我主页，谢谢观看！