我想让div旋转到鼠标所在的点,
所以当我的鼠标在左边时,它必须显示<-
;当我的老鼠在右边时,它不得不显示->
这需要朝任何方向发展!
有人有解决方案吗?
编辑:
<style>
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
</style>
<div id="arrow">></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>
您可以监听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">></div>
元掩码答案的jQuery版本。
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">></div>