CSS和JS实现放大镜的成效示例
发布时间：2022-04-20 09:00:02 所属栏目：语言 来源：互联网
导读：我们经常在一些商城网站会看到放大镜效果，也就是鼠标移动到某一位置，这一部分图片放大展示。很多人好奇这个效果是怎么做的，下面就分享一下用css+js实现放大镜效果。以下就是效果展示，感谢的朋友继续往下看吧。 实现核心： CSS函数，如：calc() 动态计算
|
我们经常在一些商城网站会看到放大镜效果，也就是鼠标移动到某一位置，这一部分图片放大展示。很多人好奇这个效果是怎么做的，下面就分享一下用css+js实现放大镜效果。以下就是效果展示，感谢的朋友继续往下看吧。 实现核心： CSS函数，如：calc() —— 动态计算；var() —— 使用自定义变量 CSS伪元素：::before/after —— 方便控制，而且独立于文档流之外，易于渲染 JS API：offsetX/offsetY：相对父节点区域左上角定位 … 其实我们具体要实现的就是：在鼠标移入时显示出来一个小圆圈（跟着鼠标走），这个小圆圈到哪，哪里的图片区域就放大相应的倍数并且显示在圆圈内。 为什么要用offset API？ 其实根据上面的描述，我们需要实时获取鼠标的左偏移量和上偏移量，而这两个偏移量是相对父节点的。通过左偏移量和上偏移量结合calc()即可计算放大镜显示内容相对父节点的显示位置。 不难找到在鼠标事件对象中，js为我们提供了如下API： screenX/screenY：相对屏幕区域左上角定位，若发生滚动行为，则相对该区域定位 pageX/pageY：相对网页区域左上角定位 clientX/clientY：相对浏览器可视区域左上角定位 offsetX/offsetY：相对父节点区域左上角定位，若无父节点则相对<html>或<body>定位 但相较而言唯一符合要求的就只有offset“相对于父元素”了。 <div class="bruce"> <div class="magnifier"></div> </div> let magnifier=document.querySelector(".magnifier"); magnifier.addEventListener("mousemove",e=>{ //控制“镜子”小圆圈的移动 }); 放大镜显示内容其实就是将原图像放大N倍，通过上述偏移量按照比例截取一定区域显示内容。先定义相关的css变量。我们设定放大倍率为2.5倍，那么被放大图像的宽高也是原来宽高的2.5倍。声明两个变量，分为为 --x 和 --y ： 图片以背景图的形式展示，方便控制大小。 很显然在这个场景下无需插入子节点作为放大镜的容器了，使用::before即可！放大镜在使用时宽高为100px，不使用时宽高为0。通过绝对定位布局放大镜随鼠标移动的位置，即声明left和top，再通过声明 transform:translate(-50%,-50%) 将放大镜补位，使放大镜中心与鼠标光标位置一致。由于声明left和top定位放大镜的位置，还可以声明 will-change 改善left和top因改变而引发的性能问题！ （编辑：南通站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
