0
0

HTML+CSS+JavaScript实现放大镜效果

效果演示

JS 详解

HTML 和 CSS 部分放在了文章最后的源代码中，这里只对 JS 部分进行详解！

首先，需要获取操作的对象：

  • 图片展示框（鼠标移入事件）
  • 放大镜（显示和跟随鼠标）
  • 放大镜中的图片（改变位置）
  1. let imgShow = document.querySelector('.img-show');  // 图片展示框
  2. let imgLarge = document.querySelector('.img-large');    // 放大镜
  3. let img = document.querySelector('img');    // 放大镜中图片

给图片展示框添加事件监听器，鼠标移入图片展示框时，显示放大镜：

  1. imgShow.addEventListener('mouseover', function() {
  2.     // 鼠标移入图片时，显示放大镜
  3.     imgLarge.style.display = "block";
  4. });

鼠标在图片展示框中移动时的事件监听器：

  1. imgShow.addEventListener('mousemove', function(event) {
  2.     // 计算鼠标在图片展示框中相对位置
  3.     let x = event.pageX - this.offsetLeft;
  4.     let y = event.pageY - this.offsetTop;
  5. });

注意：打印出 x，y 的值会发现，鼠标相对图片展示框的位置会出现负值，如下图所示：

而理论上应该都是正值，这是因为图片展示框采用的是 absolute 定位，并且用 transform 进行二次平移实现了水品垂直居中，我们先暂时将 transform 的平移效果注释掉，再次打印 x，y 的值：

发现相对位置全部变成了正值，由此可见：transform 平移的位置是不影响 ofsetLeft 和 offsetTop 的值。对于absolute 定位，ofsetLeft 和 offsetTop 依旧使用原始位置的值，并且坐标系也不会发生改变，依旧是原始位置的左上角，这就是为什么会出现负值，用一张动图来形容一下鼠标相对位置参考坐标系：

如果理解了 x 和 y 的值如何决定，就可以进行下一步了，下面会根据 x 和 y 的值进行一些数学计算！

接下来实现放大镜跟随鼠标移动：

  1. // 放大镜跟随鼠标移动
  2. imgLarge.style.left = (x + 480 - 125)+'px';
  3. imgLarge.style.top = (y + 270 - 125)+'px';

根据上述的坐标系，（x + 480）是为了让放大镜始终跟随鼠标，（ - 125）是为了让鼠标始终保持在放大镜中间，因为放大镜的宽为 250px。如果不理解，可以先把 +480 和 -125 去掉查看效果，然后逐个加上去再查看效果。这里不再演示！

限制放大镜的查看范围：

  1. // 放大镜超出范围后消失
  2. if (x < -480 || x > 480 || y < -270 || y > 270) {
  3.     imgLarge.style.display = "none";
  4. }

放大镜中图片的移动：

  1. // 放大镜中图片位置的移动
  2. img.style.left = (-(x+480)*2 + 125)+'px';
  3. img.style.top = (-(y+270)*2 + 125)+'px';

原理就是计算出两个图片之间的比例，然后根据鼠标在图片展示框中的相对位置，计算出放大镜中图片的位置偏移量，让放大镜中的图片实现移动。

  • （x+480）回归原始位置坐标系
  • *2 是两张图片的比例
  • -(x+480)*2 加负号是为了同方向移动，不然移动方向是相反的，可以自行尝试！
  • +125 如果不加的话你会发现放大位置和原始位置对不上，可以自行尝试！

源代码

  1. <!DOCTYPE html>
  2. <head>
  3.     <meta charset="UTF-8">
  4.     <title>放大镜效果</title>
  5.     <style>
  6.         * {
  7.             margin: 0;
  8.             padding: 0;
  9.             box-sizing: border-box;
  10.         }
  11.         body {
  12.             background: url(./images/bg.jpg);
  13.             background-size: cover;
  14.         }
  15.         /* 背景图片高斯模糊 */
  16.         body::after {
  17.             content: "";
  18.             position: absolute; /* 一定要用绝对定位 */
  19.             width: 100%;
  20.             height: 100%;
  21.             backdrop-filter: blur(30px); /* 模糊半径 */
  22.             z-index: -1; /* 一定要将层级调低，不然会导致整个页面高斯模糊 */
  23.         }
  24.         .img-show {
  25.             position: absolute;
  26.             top: 50%;
  27.             left: 50%;
  28.             transform: translate(-50%, -50%);
  29.             width: 960px;
  30.             height: 540px;
  31.             border: 2px solid #bebebe;
  32.             border-radius: 15px;
  33.             box-shadow: 8px 8px 20px rgba(0, 0, 0, .3), -8px -8px 20px rgba(0, 0, 0, .3);
  34.             background: url(./images/show.jpg);
  35.             background-size: cover;
  36.         }
  37.         .img-show .img-large {
  38.             display: none;
  39.             position: absolute;
  40.             width: 250px;
  41.             height: 250px;
  42.             border: 2px solid #bebebe;
  43.             border-radius: 125px;
  44.             overflow: hidden;
  45.             background-color: #fff;
  46.         }
  47.         /* 放大镜中间的准心 */
  48.         .img-show .img-large::after {
  49.             content: "+";
  50.             position: absolute;
  51.             left: 50%;
  52.             top: 50%;
  53.             transform: translate(-50%, -50%);
  54.             color: #3e3e3e;
  55.             font-size: 30px;
  56.         }
  57.         /* 放大镜显示时隐藏鼠标指针 */
  58.         .img-show .img-large:hover {
  59.             cursor: none;
  60.         }
  61.         .img-show .img-large img {
  62.             position: absolute;
  63.             width: 1920px;
  64.             border-radius: 15px;
  65.         }
  66.     </style>
  67. </head>
  68. <body>
  69.     <div class="img-show">
  70.         <div class="img-large">
  71.             <img src="./images/show.jpg" alt="">
  72.         </div>
  73.     </div>
  74.     <script>
  75.         // 获取需要操作的对象
  76.         let imgShow = document.querySelector('.img-show');
  77.         let imgLarge = document.querySelector('.img-large');
  78.         let img = document.querySelector('img');
  79. ​
  80.         // 鼠标移入图片时，显示放大镜
  81.         imgShow.addEventListener('mouseover', function() {
  82.             imgLarge.style.display = "block";
  83.         });
  84. ​
  85.         // 放大镜跟随鼠标移动
  86.         imgShow.addEventListener('mousemove', function(event) {
  87.             // 计算鼠标在图片展示框中相对位置
  88.             let x = event.pageX - this.offsetLeft;
  89.             let y = event.pageY - this.offsetTop;
  90.             // 放大镜跟随鼠标移动
  91.             imgLarge.style.left = (x + 480 - 125)+'px';
  92.             imgLarge.style.top = (y + 270 - 125)+'px';
  93.             // 放大镜超出范围后消失
  94.             if (x < -480 || x > 480 || y < -270 || y > 270) {
  95.                 imgLarge.style.display = "none";
  96.             }
  97.             // 放大镜中图片位置的移动
  98.             img.style.left = (-(x+480)*2 + 125)+'px';
  99.             img.style.top = (-(y+270)*2 + 125)+'px';
  100.         });
  101.     </script>
  102. </body>
  103. </html>
标签： css css3 html
本文转载自: https://blog.csdn.net/apple_54470279/article/details/124493950
版权归原作者 @半岛铁盒@ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“HTML+CSS+JavaScript实现放大镜效果”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？