今天来做一个非常常见且有意思的的案例，就是我们的鼠标经过图片放大的一个效果！
具体实现的效果看下面这张图
案例分析：这种类似放大镜的效果很多朋友肯定以为是一张图片的放大效果，其实我们这个地方是准备了两张图片，鼠标经过小图移动大图，这种神奇的效果就实现了。接下来我们仔细来分析一下这个效果该怎么写代码！
- 黄色的遮挡层跟随鼠标功能。
- 把鼠标坐标给遮挡层不合适。因为遮挡层坐标以父盒子为准。
- 首先是获得鼠标在盒子的坐标。
- 之后把数值给遮挡层做为left 和top值。
- 此时用到鼠标移动事件，但是还是在小图片盒子内移动。
- 发现，遮挡层位置不对，需要再减去盒子自身高度和宽度的一半。
- 遮挡层不能超出小图片盒子范围。
- 如果小于零，就把坐标设置为0
- 【DOM|js实现放大镜效果(图片放大)—JavaScript】如果大于遮挡层最大的移动距离，就把坐标设置为最大的移动距离
- 遮挡层的最大移动距离：小图片盒子宽度 减去 遮挡层盒子宽度
首先还是老规矩哈，在 body 里面把 html 框架搭好，引入两张图片。
文章图片
文章图片
这样写好了我们看不出任何效果，当然需要 css 的渲染！！！
.box {
position: relative;
width: 350px;
height: 350px;
}.yy {
position: absolute;
top: 0;
left: 0;
width: 250px;
height: 250px;
background-color: yellow;
opacity: 0.5;
border: 1px solid #333;
display: none;
}.big {
position: absolute;
left: 360px;
top: 0px;
width: 500px;
height: 500px;
overflow: hidden;
display: none;
}.big>img {
position: absolute;
top: 0;
left: 0;
}
为了展示效果我在隐藏之前截了个图，基本框架搭好以后就是这个样子啦！当然，为了更好的实现效果，这里的大图和黄色遮挡层肯定是要隐藏的，我放在上面的代码已经提前写好了隐藏。
接下肯定就是用 JavaScript 来实现的页面交互效果了。鼠标经过隐藏，鼠标离开显示，以及鼠标在小图里面移动大图跟着移动的效果。这样就实现了一个放大镜的效果！！
以上就是实现这一效果的全部代码了，感兴趣的朋友可以收藏哦，以后可就找不到这么优秀的文章了！！
推荐阅读
- 你不知道的那些字符串方法~
- 手写防抖和节流函数
- 数据库|服务器项目部署（一）
- javascript|一个超级简单的浮动Select
- 高级前端工程之路|《代码规范》如何写出干净的代码（二）函数与方法
- java|【2017中国开发者调查报告】你看那个人，好像一个程序员哦！
- Leetcode5最长回文子串(中心拓展法和动态规划法)
- JavaScript 引擎是如何实现 async/await 的
- 几种快速排序方法