闲来无事翻到了一款大佬开发的旋转菜单-故渊渡

效果图：

代码：

{hide}

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>转盘</title>
    <style>
      body {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      ul {
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: relative;
        padding: 0;
        margin: 0;
        transition: all 1s;
      }

      li {
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        position: absolute;
        background-color: aqua;
        border-radius: 50%;
        padding: 0;
        margin: 0;
        list-style-type: none;
        transition: all 0.6s;
      }

      .circle {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 150px;
        height: 150px;
        border: 1px solid #ccc;
        border-radius: 50%;
        text-align: center;
        line-height: 150px;
      }
    </style>
  </head>
  <body>
    <div class="circle">好看的旋转菜单</div>
    <ul>
      <li key="1">1</li>
      <li key="2">2</li>
      <li key="3">3</li>
      <li key="4">4</li>
      <li key="5">5</li>
      <li key="6">6</li>
      <li key="7">7</li>
      <li key="8">8</li>
      <li key="9">9</li>
      <li key="10">10</li>
    </ul>

    <script>
      const liList = document.querySelectorAll("li");
      // 每一份所占的角度（blog.heylie.cn）
      const deg = Math.round(360 / liList.length);
      // 每一份的弧度(http://mrzym.top/)
      const huDeg = (deg * Math.PI) / 180;
      // 半径
      const radius = 100;
      liList[0].style.transform = "scale(1.2)";
      for (let i = 0; i < liList.length; i++) {
        // 利用数学计算每个小圆的位置（blog.heylie.cn）
        liList[i].style.left = Math.sin(huDeg * i) * radius + 85 + "px";
        liList[i].style.top = Math.cos(huDeg * i) * radius + 85 + "px";
      }

      const ul = document.querySelector("ul");
      let currentIndex = 0,
        rotateDeg = 0;
      ul.addEventListener("click", (e) => {
        let hasRotate = false;
        for (let i = 0; i < liList.length; i++) {
          if (liList[i] == e.target && i != currentIndex) {
            // 计算出当前点击菜单 和之前高亮的菜单的角度
            let spaceDeg = (liList[i].getAttribute("key") - 1 - currentIndex) * deg;
            // 如果大于 180 我们就用较小的角度去转动 并且方向要往小方向转
            // 所以这里我们计算了小角度(http://mrzym.top)
            if (spaceDeg >= 180) {
              spaceDeg = -(360 - spaceDeg);
            }
            // 这里旋转角度会基于之前的旋转角度
            rotateDeg += spaceDeg;
            // 最后如果选择角度大于了 360 我们就只需呀转动余数 因为369 度是一圈
            // 不取余的话就是白转
            rotateDeg %= 360;
            ul.style.transform = `rotate(${rotateDeg}deg)`;
            currentIndex = i;
            hasRotate = true;
          }
        }

        console.log(rotateDeg);
        // 如果跳转了 我们的小菜单也得跟着旋转相反的角度这样才是正确的方向
        if (hasRotate) {
          for (let i = 0; i < liList.length; i++) {
            if (i == currentIndex) {
              // 并且当前这个菜单还要放大
              liList[i].style.transform = `rotate(${-rotateDeg}deg) scale(1.2)`;
            } else {
              liList[i].style.transform = `rotate(${-rotateDeg}deg)`;
            }
          }
        }
      });
    </script>
  </body>
</html>

{/hide}

{alert type=”info”}
本文来源：小张的个人博客
{/alert}

温馨提示：本文最后更新于2024-08-19 17:28:00，某些文章具有时效性，若有错误或已失效，请在下方留言或联系站长。