用js写出一个简单的放大镜操作

一,首先要做一个放大镜的效果出来我们得有相同的一大一小俩张图例如我这样的:

 

 实际我的这俩张一大一小图要比放上来的更大为了美观所以进行了调整这种图片可以去淘宝京东里面复制,然后可以去观察淘宝的放大效果可以发现这个效果大致可以分为俩个大盒子装大小俩张图,并且鼠标在小图上面的时候会有一个黄色半透明的幕布效果

并且不管怎么移动你会发现你的鼠标都在幕布中间因此我们只要获取鼠标位置和幕布左上角的位置即可移动幕布,因此以此思路开始搭建html基础结构,我的html代码如下 :

 css样式:

以及效果: 

二.在搭好基本的样式之后我们再考虑如何获得鼠标点击时候的位置这个地方可以用到事件对象的offset方式获取到鼠标的位置: 

在获取到鼠标位置之后我们在去计算当鼠标在某个位置时候幕布左上角的位置,而由于鼠标一直是在幕布中心所以它的位置x等于鼠标的x轴位置减去幕布宽度的一半,同理y轴等于鼠标y轴减去幕布高度的一半因此我们可以得出以下代码: 

 这就是幕布每次在鼠标移动时跟随移动的距离了,然后我们再把这俩个值通过

div_mask.style["left"] = x1 + "px";

 div_mask.style["top"] = y1 + "px";

注释:在这个时候移动幕布发现会来回闪烁移动回原点这是由于幕布被鼠标事件影响了可以通过给幕布的css样式里加上一个pointer-events: none;即可解决

赋给幕布即可,然而这个时候我们移动的时候会发现幕布在鼠标移出小图盒子范围之后跟着出去了这个可以通过if语句判断幕布的x,y轴在左边移动是否小于零如果小于则给他拉回来,右边的时候判断左上角点的x,y轴是否超过小图盒子宽度的一半如果超过也给它拉回来而他们的宽度,高度可以通过offsetWidth,offsetHeight获得即可

三.这个时候我们再来看大图,大图的大小由于是由小图经过放大获得的因此在大图要跟随幕布移动的时候其移动的x,y轴距离应该要乘以放大倍数,因此我们应要想办法获取它的放大倍数而它的放大倍数也等于大图宽除以小图的宽,但是由于网页加载是先加载代码的所以我们不能直接获取到俩个图片的值,因此我们可以通过window.onload获取,具体代码如下:

然后我们在跟幕布一样在获取到的幕布的x1,y1数据基础上乘以倍数赋予大图即可: 

img_big.style["margin-left"] = -x1 * bei + "px";

img_big.style["margin-top"] = -y1 * bei + "px";

这个时候查看效果发现已经实现,而如果你想要幕布在鼠标不在上面或者移出它的范围后消失可以通过style设置显示隐藏即可

代码整体样式和效果如下: