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

我们试试用最少的 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，会在游标在图片上移动时触发，事件处理函式命名为 moveHandler；
第三个，是 mouseleave，会在游标离开图片时触发，事件处理函式命名为 leaveHandler；

好，那么先处理游标进入图片时放大，离开图片时缩小到原来大小的效果。这个就很简单，平时我们惯用的方法是进入图片时加个 class，离开图片时就移除那个 class。但我想再纯粹一点，今次就用另一个方式试试。

在 enterHandler 函式内，加入 e.target.setAttribute()，将 zoomed 设定为 1，这样就即是在 <div> 上加入 zoomed="1" 这个属性。

然后在 leaveHandler 函式内，加入 e.target.removeAttribute()，将 zoomed 属性移除。

实现放大缩小功能

回到 CSS 的部份，加入 #image[zoomed] 选择器，代表当 #image 有 zoomed 这个属性的时候，将 background-size 设定为 3 倍大小，宽度与高度是 900px。

测试一下，现在移到图片上就放大，离开图片就回到原来的大小：

再来处理游标移动的情况，回到 JavaScript 的部份，在 moveHandler 函式内定义两个变量，分别是 x 和 y。我想计算出游标移到图片上的 x 方向百份比和 y 方向百份比，位移的数字可以通过 offsetX 和 offsetY 获取，再除以容器的宽度和高度就可以了。

为了准确获取容器的大小，再定义一个变量 rect，赋值为 e.target.getBoundingClientRect()，然后 x 等于 e.offsetX 除以 rect.width，y 等于 e.offsetY 除以 rect.height，再通过 e.target.style.setProperty 分别将 x 和 y 设定为 CSS 的变量，这样就可以在 CSS 中获取到 x 和 y 的值。

现在可以通过开发者工具，看到 CSS 变量的值：

有了这两个数据，再加多一行 CSS，就可以完成放大镜的效果。你猜到我会怎样做吗？如果有兴趣的话，不妨自己试一试，然后再回来继续看。

回到 CSS 的部份，在 #image[zoomed] 的选择器内加入 background-position 控制背景图片的位置：

X 的值设定为 var(--x) 乘以 100%，外层套上 calc()
Y 的值设定为 var(--y) 乘以 100%，外层套上 calc()

测试一下，放大镜效果就完成了：

不过，我们还要照顾一下手机版的情况，在手机上，以上的 mouse 事件都不太适用。这个时候就需要监听 touch 事件，分别是 touchstart、touchmove 和 touchend。刚好可以与 mouse 那三个事件一一对应，先新增它们的事件监听器。

然后主要需要调整的是 moveHandler，因为 touch 事件的 event 物件并没有 offsetX 和 offsetY，所以我们需要自行计算。

定义两个变量，offsetX 和 offsetY，判断 e.type 是否为 touchstart、touchmove 或 touchend。

先设定 else 用游标的情况，将 offsetX 与 offsetY 赋值为 Event 物件内的对应值就可以了。

而 touch 的情况，首先 touch 是支援多点触碰的，假设我们用一只手指触碰荧幕，要获取第一个触碰点，可以通过 e.touches[0]，然后 .pageX 减去 rect.left，这个就是 offsetX 的设定值。运用相同的原理，计算 offsetY 的值。

然后将 x 的 e.offsetX 改为变量 offsetX，y 的 e.offsetY 改为变量 offsetY，在手机操作的情况下，还要加入 e.preventDefault，这样才可以避免手指在图片上滑动的时候触发页面的卷动。

最后，再来一点优化，当我手指开始点下去的时候，如果不移动的话，放大的就是上一次 x 和 y 的位置，而不是我直接点下去的位置。

mouse 事件没有这个问题的，因为游标要移到图片的哪一个点都好，都一定要有移动的动作，一定会触发到 mousemove，而更正这个情况就很简单，只需要在 enterHandler 和 leaveHandler 函式内都执行一次 moveHandler 就可以了，注意要将 e 这个参数传递进去。

我们来看看这个案例的完成效果

以上，就是今集要介绍的全部内容。

最后需要这些资料的，点击这里即可领取！

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

AndroidStudio 制作一个超简易记账本App（1.0）【含详细步骤】
先看最终效果: 1.首先创建一个Empty Activity 2.在activity_main.xml里编写主界面布局根据预览图,主界面需要一个ListView和一个ImageButton,还要给I ...
数字式声纳设计原理 pdf_阿里P7大牛，深入剖析JVM底层设计原理+高级特性pdf，附46页ppt...
前言 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 引入J ...
java 底层ppt_阿里P7大牛，深入剖析JVM底层设计原理+高级特性pdf，附46页ppt
前言 JVM是Java Virtual Machine(Java虚拟机)的缩写,JVM是一种用于计算设备的规范,它是一个虚构出来的计算机,是通过在实际的计算机上仿真模拟各种计算机功能来实现的. 引入J ...
PWA入门：手把手教你制作一个PWA应用
摘要: PWA图文教程原文:PWA入门:手把手教你制作一个PWA应用作者:MudOnTire Fundebug经授权转载,版权归原作者所有. 简介 Web前端的同学是否想过学习app开发,以弥补自 ...
css响应式布局_用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
如何使用CSS简单的制作一个视频网站
如何使用CSS简单的制作一个视频网站 1.主页的设置 <!DOCTYPE html><html lang="en"><head> <met ...
送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript)520情人节/七夕情人节/程序员表白...
❉ 送学妹的生日礼物~ 制作一个超浪漫的告白3D相册(HTML+CSS+JavaScript) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一 ...
手把手教你制作一个简单的聊天机器人(图灵api)
前言:在无聊的时候打打游戏.听听歌还不如来找个人来陪你聊天,今天来教大家制作一个聊天机器人,这样就不会无聊了,在线聊天机器人地址借愁哥哥机器人(可能有点丑,大家将就一下 (
手把手教你制作一个带特效的全景图片
一个好的产品才会令人印象深刻,全景图也是这样.这篇文章教你制作一个带特效的全景图片,让你的全景图片"靓"起来. 第一步.准备一张2:1的全景图片.如果不知道全景图是怎么制作的话,可 ...

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