[JavaScript知识库]原生JS实现放大镜效果(HTML、CSS、JavaScript)

效果如下：

首先分析一下布局。如下图所示，先有一个红色的大盒子作为整体的容器；蓝色为红色大盒子里的容器，左边为一开始的图片放置的容器，右边为经过放大后的处理效果图片的放置容器；左右蓝色容器里，绿色代表放置的图片；黄色盒子是滑块的盒子，应与图片是属于同一级的。

<!--外层容器-->
<div id="box">
	<!--左侧图片容器-->
	<div class="small">
		<!--滑块-->
		<div class="slider"></div>
		<!--图片-->
		<img src="lyf.jpg">
	</div>
	<!--右侧图片容器-->
	<div class="big">
		<!--图片-->
		<img src="lyf.jpg" class="big_img">
	</div>
</div>

样式分析如下：此时我做的放大镜是放大两倍的，左右图片容器一致大小的情况下，右侧的图片应是左侧图片的两倍。

/*这里需要设置容器为相对定位，因为子容器为绝对定位，否则子容器的定位不会产生效果*/
#box {
	position: relative;
}
.small {
	width: 400px;
	height: 400px;
}
.small img {
	width: 100%;
	height: 100%;
}
.small .slider {
	/*此处也是有技巧的，因为右图是左图的两倍，所以滑块应是左图的1/2，保证整个图片都可以被显示到*/
	width: 200px;
	height: 200px;
	/*此处的绝对定位是为了后面鼠标移动时的坐标处理*/
	position: absolute;
	background: rgba(255, 255, 255, .3);
	cursor: move;
	/*默认隐藏*/
	display: none;
}
.big {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 410px;
	/*溢出隐藏，保证右边只展示一部分放大的效果，而不会展示一整个800px*800px*/
	overflow: hidden;
	display: none;
}
.big img {
	position: absolute;
	width: 800px;
	height: 800px;
}

JS实现的是：鼠标移入显示滑块和放大的图、鼠标移出不显示滑块和放大后的图。

//封装选择器实现复用
function selector(name) {
	return document.querySelector(name);
}
//选出需要进行操作的元素
var small = selector('.small'),
slider = selector('.slider'),
big = selector('.big'),
big_img = selector('big_img');

//鼠标移入
small.addEventListener('mousemove', function(e){
	slider.style.display = 'block';
	big.style.display = 'block';
	//e.clientX：当前移入点（鼠标位置）与X轴的距离坐标
	//slider.offsetWidth：当前滑块自身的宽度，除以2是为了让鼠标可以位于滑块的中间
	var left = e.clientX - slider.offsetWidth / 2;
	var top = e.clientY - slider.offsetHeight / 2;
	var maxHeight = this.offsetWidth - slider.offsetWidth;
	var maxHeight = this.offsetHeight - slider.offsetHeight;
	//鼠标移动范围
	if(left < 0) {
		left = 0;
	}else if(left > maxWidth) {
		left = maxWidth;
	}
	if(top < 0) {
		top = 0;
	}else if(top > maxHeight) {
		top = maxHeight;
	}
	//当前滑块的位置
	slider.style.left = left + 'px';
	slider.style.top = top + 'px';
	//右侧大图的位置
	big_img.style.left = -(left*2) + 'px';
	big_img.style.top = -(top*2) + 'px';
});
//鼠标移出
small.onmouseleave = function() {
	slider.style.display = 'none';
	big.style.display = 'none';
}

这样放大镜效果就做好啦，有什么问题下方讨论，请各位大佬指教。