[英]Rotate div to mouse position
I want to let a div rotate to the point where the mouse will be,我想让一个 div 旋转到鼠标所在的位置,
So when my mouse is left it have to show <-
when my mouse is to the right it have to show ->
所以当我的鼠标离开时它必须显示<-
当我的鼠标向右时它必须显示->
This needs to be in any direction!这需要在任何方向!
Does anyone have a solution?有没有人有解决方案?
EDIT:编辑:
<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>
You can listen for mousemove events to get the position of the cursor.您可以侦听 mousemove 事件以获取光标的位置。 Then, use a rotation transform to make the arrow rotate.然后,使用旋转变换使箭头旋转。
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>
A jQuery version of metarmask's answer. metamask 答案的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.