js实现随着手指滑动，5个元素围绕y轴进行圆周运动

最新推荐文章于 2024-07-24 11:58:45 发布

F_cy

最新推荐文章于 2024-07-24 11:58:45 发布

阅读量761

点赞数 2

文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44510655/article/details/136174206

版权

本文介绍了一段HTML、CSS和JavaScript代码，演示如何在触摸事件驱动下创建一个圆形元素，模拟圆周运动。通过调整touch-action属性和触摸移动时的角度计算，实现了元素跟随手指移动而围绕中心做圆周运动的效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Circular Motion with Touch</title>
    <style>
      .circle-container {
        position: relative;
        height: 300px;
        width: 300px;
        margin: 50px;
        overflow: hidden;
      }

      .circle-item {
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: red;
        border-radius: 50%;
        touch-action: none; /* Prevent scrolling when touching */
      }
    </style>
  </head>
  <body>
    <div class="circle-container" id="circleContainer">
      <!-- <div class="circle-item" id="circleItem1"></div> -->
    </div>

    <script>
      const container = document.getElementById("circleContainer");
      const items = Array.from({ length: 5 }, (_, i) =>
        document.createElement("div")
      );
      const itemIds = [
        "circleItem1",
        "circleItem2",
        "circleItem3",
        "circleItem4",
        "circleItem5",
      ];
      const radius = 100; // Adjust this based on your needs
      let angle = 0;
      let touchStartX = 0;

      items.forEach((item, index) => {
        item.className = "circle-item";
        item.id = itemIds[index];
        item.style.left = `${radius + radius * Math.cos(angle)}px`;
        item.style.top = `${radius + radius * Math.sin(angle)}px`;
        container.appendChild(item);
        angle += (2 * Math.PI) / items.length;
      });

      container.addEventListener("touchstart", (e) => {
        touchStartX = e.touches[0].clientX;
      });

      container.addEventListener("touchmove", (e) => {
        const touchMoveX = e.touches[0].clientX;
        const deltaX = touchMoveX - touchStartX;

        angle -= deltaX * 0.01; // Adjust this coefficient for speed
        touchStartX = touchMoveX;

        updatePositions();
      });

      function updatePositions() {
        items.forEach((item, index) => {
          const itemAngle = angle + (2 * Math.PI * index) / items.length;
          item.style.left = `${radius + radius * Math.cos(itemAngle)}px`;
          item.style.top = `${radius + radius * Math.sin(itemAngle)}px`;
        });
      }
    </script>
  </body>
</html>

实现效果：