使用JavaScript实现放大镜效果（有详细注释）

目录

效果图

如何使用JavaScript实现放大镜效果大概思路

一、存放图片代码

二、css代码

三、js代码

        小知识点

四、完整代码

效果图

如何使用JavaScript实现放大镜效果大概思路：

1. 先用两个div来存放图片，一个存放原始图片，一个存放放大后的图片
2. 再来一个遮罩层，设置成半透明，并实现遮罩层随着鼠标移动而移动
3. 在计算遮罩层不可超出容器范围
4. 计算放大图片的位置，并显示放大后的位置

一、存放图片代码：

<div class="smDiv">
	<img src="img/smallpic.jpg" alt="" />
    <div class="zoom"></div>
</div>
<div class="bigDiv">
	<img src="img/bigpic.jpg" alt="" />
</div>

二、css代码：

.smDiv {
	width: 300px;
	height: 225px;
	border: 1px solid #000;
	position: relative;
}
.bigDiv {
	position: absolute;
	top: 8px;
	left: 330px;
	width: 330px;
	height: 330px;
	overflow: hidden;
	border: 1px solid #000;
	display: none;
}
.zoom {
	width: 110px;
	height: 111px;
	z-index: 99;
	background-color: #84