放大镜案例

目录

1、首先搭建HTML结构：

2、获取元素

3、鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子

4、获取鼠标子盒子内坐标

5、此时鼠标位于黄色遮罩层的左上角，应该改为中央

6、遮罩层不能超出图片位置

7、移动黄色遮挡层，大图片跟随移动

---

案例分析

整个案例可以分为三个功能模块

1、 鼠标经过小图片盒子， 黄色的遮挡层 和 大图片盒子显示，离开隐藏2个盒子功

2、黄色的遮挡层跟随鼠标功能。

3、移动黄色遮挡层，大图片跟随移动功能。

① 黄色的遮挡层跟随鼠标功能。

② 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。

③ 首先是获得鼠标在盒子的坐标。

④ 之后把数值给遮挡层做为left 和top值。

⑤ 此时用到鼠标移动事件，但是还是在小图片盒子内移动。

⑥ 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。

⑦ 遮挡层不能超出小图片盒子范围。

⑧ 如果小于零，就把坐标设置为0

⑨ 如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离

⑩ 遮挡层的最大移动距离： 小图片盒子宽度 减去 遮挡层盒子宽度

1、首先搭建HTML结构：

【 一个大的div 包含 一张图片 一个遮罩层mask，和一个大盒子big，该大盒子big里存放一张大图。】

<div class="img">
        <img src="./素材/im.jpg" alt="" class="img1">
        <div class="mask"></div>
        <div class="big">
            <img src="./素材/im.jpg" alt="" class="bigImg">
        </div>
    </div>

2、获取元素

var img = document.querySelector('.img');
            var mask = document.querySelector('.mask');