阿里P7大牛，纯CSS教你制作一个超简易图片放大镜

今天会介绍一个在商城网站经常看到的功能，图片放大镜的效果：

我们试试用最少的 JavaScript，尽量使用 CSS 以及最简单的 HTML 结构去实现，那我们就开始啦。

HTML 的部份

打开 CodePen 编辑器，在 HTML 的部份加入一个 <div>，id 名为 image。

 

CSS 的部份

去到 CSS 的部份，新增 #image 选择器，宽度和高度设定为 300px，背景颜色设定为黑色。

然后将需要显示的图片，通过 background-image 设定为背景图片，由于我们要做放大镜的效果，所以这张图片的大小需要大于容器的大小，例如放大镜会将图片放大 3 倍，那图片的大小就是 900px 乘以 900px 了。

然后再通过 background-size，将它设定回 300px 乘以 300px 的大小，而 background-repeat 设定为 no-repeat。

 

再加入 body 选择器，使用 Flexbox 的方式将内容上下左右置中。

 

JavaScript 的部份

好了，那么如何做到当游标移到图片上时，将图片放大呢？这里涉及到三个 JavaScript Event。在 JavaScript 的部份，加入三个事件监听器：

• 第一个，是 mouseenter，会在游标进入图片时触发，事件处理函式命名为 enterHandler；
• 第二个，是 mousemove，会在游标在图片上移动时触发ÿ