放大镜的原理：

首先，网上购物商城使用放大镜是为了让顾客更加清晰放大的看商品图片的细节；现在开始分析放大镜，会发现当鼠标一进入商品展示框的时候，在商品照片框的右手边就会出现一个固定的框，并且鼠标下面也会显示一个方块；

当鼠标移出商品照片框的时候，右手边的框就会立马消失；

当鼠标在商品照片框中移动的时候，右手边的框会根据鼠标所在的位置，显示放大n倍的照片。

综上所述，其实，放大镜调用三个鼠标事件，onmouseover（移入），onmouseout（移出），onmousemove（一直移动），接下来细说这三个鼠标事件怎么去关联放大镜

全部代码：

Document *{ margin: 0; padding: 0; } #smallImg{ width: 300px; height: 300px; background-image: url(../img/1560692006601.png); background-size: cover; } #smallDiv{ width: 100px; height: 100px; background-color: red; display: none ; position: absolute; } #bigDiv{ width: 300px; height: 300px; position: absolute; left: 300px; top: 0px; overflow: hidden; display: none ; } #bigImg{ width: 900px; height: 900px; position: absolute; }

注意： 你们运行这个代码的时候，照片的地址是不一样的，修改下自己的照片地址

提示：以下是本篇文章正文内容，下面案例可供参考

一、css的设置注意点

鼠标下面的小盒子和右手显示放大图片的盒子，在设置display时，属性值都是none，在未触发之前，都隐藏

编辑

#bigDiv是右手边存放大照片的那个盒子，且照片的大小比盒子大，所以要用到overflow：hidden，多出来的部分隐藏，绝对固定之后，让盒子固定在具体位置

二、三个鼠标事件

1.onmouseover：鼠标进入

编辑代码如下

一旦鼠标进入商品盒子时，鼠标下面的小div和外面大div立即显示

2.onmouseout：鼠标移出

当鼠标移出时，立刻就让大div和小div的盒子消失

3 .onmousemove：鼠标在商品照片上一直移动

smallImg.onmousemove=function(e){

var e=e||window.event;

var x=e.clientX-50;//因为鼠标在小div的中心位置

var y=e.clientY-50;

//接下来if判断，是为了判断鼠标下的小div是否是在内部框的边缘，是否要出界没有，一旦出界，就算是鼠标移出

if(x>=200) x=200;

if(x<=0)x=0；

if(y>=200) x=200;

if(y<=0)x=0;

//小div移动位置随时更新

smallDiv.style.left=x+'px';

smallDiv.style.top=y+'px';

//大盒子移动位置也随时跟着更新

//注意：接下来是关键点：根据鼠标移动会发现，当鼠标在照片上往右移动时，大div框移动是往左移动的，所以bigDiv就需要调用相反方向的x，y值；但是有一点，之前我们设置小div宽高是100px，商品照片的宽高是300px，比例是1:3；大div的高宽是300px，照片的高宽是900px，比例也是1:3，但是两张照片的比例也是1:3；所以，移动的距离也要是1：3；x，y要乘以三倍

//大图的移动距离

bigDiv.style.left=-x*3+'px';

bigDiv.style.left=-y*3+'px';

}

总结

在做放大镜的时候，几个细节点：

1：css中display，flowover这两个要设置好

2：在onmousemove里，不能只判断鼠标出商品框才触发display，因为鼠标下面有个遮罩盒子，所以要进行判断；其次，是鼠标在移动时对应旁边的div中的移动距离比例要掌握好