图片选框跟随鼠标移动

最新推荐文章于 2024-07-18 20:18:47 发布

Dyanfee

最新推荐文章于 2024-07-18 20:18:47 发布

阅读量984

点赞数 9

分类专栏： html 文章标签： css 前端

本文链接：https://blog.csdn.net/Dyanfee/article/details/140018121

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

实现效果

鼠标移动到图标，选框跟随移动，如下图：

在这里插入图片描述

效果查看(点击查看)

实现思路

使用css变量设置选框位置和样式

.pointer {
  --l: 30px; /* 线框长度*/
  --t: 3px; /* 线框粗细 */
  --g: 16px; /* 线框与图片的间隙 */
  --w: 350px; /* 图片大小 */
  --h: 200px; /* 图片大小 */
  --x: -600px;
  --y: 24px; /* 线框左上角纵坐标 */
  display: none;
  position: absolute;
  width: calc(var(--w) + var(--g) * 2);
  height: calc(var(--h) + var(--g) * 2);
  border: var(--t) solid #fff;
  left: calc(var(--x) - var(--g));
  top: calc(var(--y) - var(--g));
}

使用css 的 mask属性绘制选框边缘

.pointer {
  mask: conic-gradient(
      at var(--l) var(--l),
      transparent 75%,
      blue 75% 100%
    )
    0 0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat;
}

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>图片选框跟随鼠标移动</title>
    <style>
      * {
        box-sizing: border-box;
      }
      body {
        background-color: #000;
        padding: 50px;
        margin: 0;
      }
      .container {
        display: grid;
        grid-template-columns: repeat(3, 33.33%);
        position: relative;
      }
      .item {
        width: 100%;
        padding: 24px;
      }
      .item img {
        width: 100%;

        object-fit: cover;
        display: block;
        cursor: pointer;
      }
      .pointer {
        --l: 30px; /* 线框长度*/
        --t: 3px; /* 线框粗细 */
        --g: 16px; /* 线框与图片的间隙 */
        --w: 350px; /* 图片大小 */
        --h: 200px; /* 图片大小 */
        --x: -600px;
        --y: 24px; /* 线框左上角纵坐标 */
        display: none;
        position: absolute;
        width: calc(var(--w) + var(--g) * 2);
        height: calc(var(--h) + var(--g) * 2);
        border: var(--t) solid #fff;
        left: calc(var(--x) - var(--g));
        top: calc(var(--y) - var(--g));
        transition: 0.2s;
        mask: conic-gradient(
            at var(--l) var(--l),
            transparent 75%,
            blue 75% 100%
          )
          0 0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"><img src="./out/1 (1).jpg" alt="" /></div>
      <div class="item"><img src="./out/1 (2).jpg" alt="" /></div>
      <div class="item"><img src="./out/1 (3).jpg" alt="" /></div>
      <div class="item"><img src="./out/1 (4).jpg" alt="" /></div>
      <div class="item"><img src="./out/1 (5).jpg" alt="" /></div>
      <div class="item"><img src="./out/1 (6).jpg" alt="" /></div>
      <div class="pointer"></div>
    </div>
  </body>
  <script>
    const images = document.querySelectorAll(".container img");
    const pointer = document.querySelector(".pointer");
    for (const img of images) {
      img.onmouseenter = () => {
        pointer.style.display = "block";
        pointer.style.setProperty("--w", `${img.offsetWidth}px`);
        pointer.style.setProperty("--h", `${img.offsetHeight}px`);
        pointer.style.setProperty("--x", `${img.offsetLeft}px`);
        pointer.style.setProperty("--y", `${img.offsetTop}px`);
        console.log("pointer", pointer);
      };
    }
  </script>
</html>