自定义水平光标连接两条竖线效果异常 前端代码问题排查

核心修改点 #

• 将两条竖线的transform-origin调整为bottom，保证竖线底端固定在初始位置，仅上端随光标端点移动
• 连接目标从鼠标坐标改为光标条的左右两个端点，实现端点精准对接效果
• 移除光标元素初始transform中的translateZ(100px)设置，避免3D变换带来的坐标计算偏差
• 新增rem转px计算逻辑，准确获取光标条宽度，计算右端点的精准坐标

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      overflow: hidden;
      perspective: 500px;
      perspective-origin: top;
      transform-style: preserve-3d;
      width: 100%;
      height: 100vh;
      background: black;
      position: relative;
    }
    
    .cursor {
      position: absolute;
      width: 8rem;
      height: 3px;
      border-radius: 10px;
      background: white;
      z-index: 11;
      left: 0;
      top: 0;
      transform-style: preserve-3d;
    }
    
    .follow_cursor {
      position: absolute;
      background: white;
      width: 2px;
      height: 5rem;
      z-index: 2;
      top: 0;
      left: 0;
      transform-origin: bottom;
      backdrop-filter: blur(20px);
    }
    
    .follow_cursor2 {
      position: absolute;
      background: white;
      width: 2px;
      height: 2rem;
      z-index: 3;
      top: 0;
      left: 100%;
      transform-origin: bottom;
      backdrop-filter: blur(20px);
    }
  </style>
</head>
<body>
  <div class="cursor">
    <div class="follow_cursor"></div>
    <div class="follow_cursor2"></div>
  </div>
<script>
  let cursor = document.querySelector(".cursor");
  const follow = document.querySelector(".follow_cursor");
  const follow_2 = document.querySelector(".follow_cursor2");
  // 计算1rem对应的px值，获取光标条宽度
  const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
  const cursorWidth = 8 * remToPx;
  // 初始固定底端坐标
  const origR = follow.getBoundingClientRect();
  const origR2 = follow_2.getBoundingClientRect();
  const fixedBottomX1 = origR.left + origR.width / 2;
  const fixedBottomY1 = origR.bottom;
  const fixedBottomX2 = origR2.left + origR2.width / 2;
  const fixedBottomY2 = origR2.bottom;
  document.onmousemove = (e) => {
    let mouseX = e.pageX;
    let mouseY = e.pageY;
    // 移动光标条
    cursor.style.transform = `translate3d(${mouseX}px, ${mouseY}px , 0)`;
    // 计算光标条左右两个端点坐标
    const cursorLeftX = mouseX;
    const cursorLeftY = mouseY + 1.5; // 1.5是光标条高度的一半，居中对接
    const cursorRightX = mouseX + cursorWidth;
    const cursorRightY = mouseY + 1.5;
    // 计算第一条竖线的长度和角度
    const dist1 = Math.sqrt((cursorLeftX - fixedBottomX1) ** 2 + (cursorLeftY - fixedBottomY1) ** 2);
    const angle1 = 90 + (Math.atan2(fixedBottomY1 - cursorLeftY, fixedBottomX1 - cursorLeftX) * 180) / Math.PI;
    follow.style.transform = `rotateZ(${angle1}deg) scaleY(${dist1 / origR.height})`;
    // 计算第二条竖线的长度和角度
    const dist2 = Math.sqrt((cursorRightX - fixedBottomX2) ** 2 + (cursorRightY - fixedBottomY2) ** 2);
    const angle2 = 90 + (Math.atan2(fixedBottomY2 - cursorRightY, fixedBottomX2 - cursorRightX) * 180) / Math.PI;
    follow_2.style.transform = `rotateZ(${angle2}deg) scaleY(${dist2 / origR2.height})`;
  };
</script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Rahul