元素消失问题排查：鼠标跟随旋转的jQuery代码（附jsfiddle链接）

嘿，我帮你找出了几个导致元素消失的关键问题，咱们一个个说：

问题1：中心点坐标未实时更新 #

你在页面初始化时只计算了一次boxCenter，但如果页面发生滚动，或者元素位置有变化，这个初始的中心点坐标就不再准确了。错误的中心点会导致角度计算偏差，极端情况下元素会旋转到视野外，看起来像是“消失”了。

问题2：角度计算的参数顺序错误 #

Math.atan2()的正确参数顺序是**(y轴差值, x轴差值)**，你现在写反了参数顺序，还对y轴差值做了不必要的取反，这会导致角度计算完全混乱，元素旋转方向错误甚至出现异常偏移。

问题3：元素基础样式缺失（潜在原因） #

如果你的.box没有设置宽高、背景色等可见样式，即使旋转逻辑正确，也可能因为没有可见内容而看起来像是消失了。

修复后的完整代码 #

HTML #

<div id="anglereturn"></div>
<div class="box"></div>

CSS #

.box {
  width: 50px;
  height: 50px;
  background: #2c3e50;
  position: absolute; /* 确保offset计算准确，避免受文档流影响 */
}

JavaScript（jQuery） #

var box = $(".box");

$(document).mousemove(function(e) {
  // 每次鼠标移动都重新计算元素中心点，确保坐标准确
  var boxOffset = box.offset();
  var boxCenter = [
    boxOffset.left + box.width()/2,
    boxOffset.top + box.height()/2
  ];
  
  // 修正Math.atan2的参数顺序：(y差值, x差值)
  var yDiff = e.pageY - boxCenter[1];
  var xDiff = e.pageX - boxCenter[0];
  var angle = Math.atan2(yDiff, xDiff) * (180/Math.PI);
  
  // 统一设置transform样式，避免重复调用css()
  box.css({
    '-webkit-transform': 'rotate(' + angle + 'deg)',
    '-moz-transform': 'rotate(' + angle + 'deg)',
    'transform': 'rotate(' + angle + 'deg)'
  });
});

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