将div旋转到鼠标位置

Question

我希望让一个div旋转到鼠标指向的点，当鼠标指向左侧时，它应该显示<-，当鼠标指向右侧时，它应该显示->。这需要支持任何方向！有没有什么解决方法？

<style>
    body {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
</style>

<div id="arrow">&gt;</div>

<script type="text/javascript">
    var arrow = document.querySelector("#arrow");
    var arrowRects = arrow.getBoundingClientRect();
    var arrowX = arrowRects.left + arrowRects.width / 2;
    var arrowY = arrowRects.top + arrowRects.height / 2;

    addEventListener("mousemove", function(event) {
        arrow.style.transform = "rotate(" + Math.atan2(event.y - arrowY, event.x - arrowX) + "rad)";
    });
</script>

- user4640949

Answer 1

你可以监听mousemove事件来获取鼠标光标的位置。然后使用旋转变换来使箭头旋转。

function getCenter(element) {
    const {left, top, width, height} = element.getBoundingClientRect();
    return {x: left + width / 2, y: top + height / 2}
}

const arrow = document.querySelector("#arrow");
const arrowCenter = getCenter(arrow);
addEventListener("mousemove", ({clientX, clientY}) => {
    const angle = Math.atan2(clientY - arrowCenter.y, clientX - arrowCenter.x);
    arrow.style.transform = `rotate(${angle}rad)`;
});

html  {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

<div id="arrow">&gt;</div>

- metarmask

---

我不明白，它在 jsfiddle 上可以运行，但在我的本地主机上却不行...? - user4640949

确保脚本在元素加载后运行，将脚本标签放在 body 的末尾。 - metarmask

你在查看本地主机时使用了相同的浏览器吗？刚刚发现Firefox还不支持x和y别名。当我更改后，你在问题中放置的代码可以在Firefox和Chrome中正常工作。 - metarmask

Answer 2

一个基于jQuery的metamask答案版本。

var arrow = $('#arrow');
var arrowX = arrow.offset().left + arrow.outerWidth(true) / 2;
var arrowY = arrow.offset().top + arrow.outerHeight(true) / 2;

$(document).on('mousemove', function(event) {
  var rad = Math.atan2(event.pageY - arrowY, event.pageX - arrowX);
  arrow.css('transform', 'rotate('+rad+ 'rad)');
});

body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="arrow">&gt;</div>

- Souleste