js鼠标移动的轨迹

你你你就你

于 2020-07-19 21:58:35 发布

阅读量917

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Ga_b_c/article/details/107452411

本文详细介绍了如何使用JavaScript来捕获并绘制用户的鼠标移动轨迹，包括监听鼠标移动事件、保存坐标点、在画布上绘制路径等关键步骤，让你轻松创建交互式的网页效果。

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

<style>
    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 30px;
      height: 30px;
      border-radius: 50%;
      /* background: red; */
      position: fixed;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      cursor: default;
    }
  </style>

<script>
  for (var i = 1; i <= 200; i++) {
    var oDiv = document.createElement('div');
    oDiv.innerHTML = i;
    oDiv.style.background = `rgb(${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)},${Math.round(Math.random() * 255)})`
    document.body.appendChild(oDiv);
  }

  var oBalls = document.querySelectorAll('div');

  var r = oBalls[0].offsetWidth / 2;

  document.onmousemove = function (e) {
    var ev = event || e;
    var x = ev.x;   // 获取鼠标的可视x坐标
    var y = ev.y;   // 获取鼠标的可视y坐标

    oBalls[0].style.cssText += `left: ${x - r}px; top: ${y - r}px`; // 直接修改元素的style属性
    for (var i = oBalls.length - 1; i > 0; i--) {
      oBalls[i].style.left = oBalls[i - 1].style.left;
      oBalls[i].style.top = oBalls[i - 1].style.top;
    }
  }
</script>