四角光标跟随鼠标, 鼠标落在哪个图片上, 光标就跟随到哪张图片 (一种实现思路)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      --gap: 20px;
      /* 图片宽度 */
      --width: 20px;
      /* 图片高度 */
      --height: 20px;
      --top: 0;
      --left: 0;
      /* 图片间距 */
      --padding: 10px;
      /* 图片边框宽高 */
      --border: 40px;
      /* 图片边框颜色 */
      --borderColor: transparent;
      /* 图片边框内边距 */
      --borderPadding: -10px;
      --borderPadding2: 10px;
      /* 图片边框宽度 */
      --borderWidth: 3px;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      padding: var(--gap);
      position: relative;
    }

    .pointer {
      position: absolute;
      top: var(--top);
      left: var(--left);
      z-index: 1;
      width: var(--width);
      height: var(--height);
      transition: all .28s;


      .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }
      }

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }
      }

      .right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }
      }

      .bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }
      }
    }

    .container div {
      /* background: pink; */
      /* height: calc(100vw / 3); */
    }

    .container div img {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="pointer">
      <div class="top"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="bottom"></div>
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=1"
        alt=""
      >
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=2"
        alt=""
      >
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=3"
        alt=""
      >
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=4"
        alt=""
      >
    </div>



    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=5"
        alt=""
      >
    </div>
  </div>

  <script>
    const imgs = document.querySelectorAll('.container img');
    imgs[0].onload = function () {
      setProperty(imgs[0])
    }



    // 根据元素设置css变量值
    function setProperty(el) {
      const rect = el.getBoundingClientRect();
      const { width, height, top, left } = rect;
      const color = `rgb(${parseInt(Math.random() * (2 << 7))},${parseInt(Math.random() * (2 << 7))},${parseInt(Math.random() * (2 << 7))})`
      const settings = [
        ['--top', top + 'px'],
        ['--left', left + 'px'],
        ['--borderColor', color],
        ['--width', width + 'px'],
        ['--height', height + 'px']
      ]
      settings.forEach(item => {
        document.documentElement.style.setProperty(item[0], item[1]);
      })
    }
    // 设置css变量值

    window.onresize = () => {
      setProperty(imgs[0])
    }

    imgs.forEach(el => {
      el.addEventListener('mouseenter', () => {
        setProperty(el)
      })
    })
  </script>
</body>

</html>
posted @ 2024-08-09 11:30 深海里的星星i 阅读(41) 评论(0) 收藏举报
刷新页面返回顶部
深海里的星星i

四角光标跟随鼠标, 鼠标落在哪个图片上, 光标就跟随到哪张图片 (一种实现思路)

公告
