利用原生js编写一个放大镜功能-创新互联

本篇文章为大家展示了利用原生js编写一个放大镜功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

1. 查找元素

 1.1 查找 main 总分区
 1.2 查找 small 盒子
 1.3 查找 small 盒子内的 img 小图片
 1.4 查找 mask 遮罩层
 1.5 查找 big 盒子
 1.6 查找 big 盒子内的 img 大图片

2. 鼠标移入 main 的时候

 2.1 显示 遮罩盒子
 2.2 显示 大图分区

3. 鼠标移出 main 的时候

 3.1 隐藏 遮罩盒子
 3.2 隐藏 大图分区

4. 鼠标在 main 移动的时候 !!!

 4.1 遮罩盒子 跟随 鼠标移动
 4.2 遮罩盒子 在 鼠标中心 处理
 4.3 遮罩盒子 在 分区边界 内移动处理
 4.4 大图片 <反向> <按比例> 跟随 鼠标移动

 注意.获取元素偏移值和宽高

 1. 获取 分区 的 水平，垂直偏移值
 2. 获取 分区 的 宽度，高度
 3. 获取 遮罩盒子 的 宽度，高度 (隐藏的盒子无法获取宽高)
 4. 获取 大图片 的 宽度，高度 (隐藏的盒子无法获取宽高)

html代码: