四角游標跟隨滑鼠, 滑鼠落在哪個圖片上, 游標就跟隨到哪張圖片 (一種實現思路)

深海里的星星i發表於2024-08-09
<!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>

相關文章