Rotating a moving image with jquery
Question
I'm having some problems causing in image to rotate properly after it follows the cursor. I think that it is rotating based on it's original location but I am not sure.
Any chance to make it rotate a full 360 degrees regardless of its final location?
original code:
CSS
<style>
.box{
background-color: black;
width: 30px;
height: 30px;
position: absolute;
left: 200px;
top: 200px;
}
</style>
HTML
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="box" id="image"> </div>
</body>
JS
<script>
$(document).mousemove(function(e){
/*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
$("#image").stop().animate({left:e.pageX, top:e.pageY}, {duration: 5000});
});
</script>
<script>
let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter= {
x: boxBoundingRect.left + boxBoundingRect.width/2,
y: boxBoundingRect.top + boxBoundingRect.height/2
};
document.addEventListener("mousemove", e => {
let angle = Math.atan2(e.pageX - boxCenter.x, - (e.pageY - `boxCenter.y) )*(180 / Math.PI);`
box.style.transform = `rotate(${angle}deg)`;
})
</script>
1 answers
solution1
1 2022-01-29 18:20:58
A must-know about coding:
When coding, declaring a variable like the following works differently than you think it does.
var var1 = 2;
var var2 = var1;
Instead of var2 always being the value of var1 , it just sets var2 to whatever var1 is at the moment.
Which means setting var1 to 3 will still keep var2 at 2.
Confused? Check this post to see what I mean, (To be honest, this confused me more)
How does this relate?
In the following line, you do the following:
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
x: boxBoundingRect.left + boxBoundingRect.width / 2,
y: boxBoundingRect.top + boxBoundingRect.height / 2
};
But when the position changes, those values don't change. Rather, they stay the same.
What do you do?
In this function:
document.addEventListener("mousemove", e => {
let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
box.style.transform = `rotate(${angle}deg)`;
})
Recalculate the bounding box so it looks like the following:
document.addEventListener("mousemove", e => {
boxBoundingRect = box.getBoundingClientRect();
boxCenter = {
x: boxBoundingRect.left + boxBoundingRect.width / 2,
y: boxBoundingRect.top + boxBoundingRect.height / 2
};
let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
box.style.transform = `rotate(${angle}deg)`;
})
Snippet
$(document).mousemove(function(e) { /*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/ $("#image").stop().animate({ left: e.pageX, top: e.pageY }, { duration: 5000 }); }); let box = document.querySelector(".box"); let boxBoundingRect = box.getBoundingClientRect(); let boxCenter = { x: boxBoundingRect.left + boxBoundingRect.width / 2, y: boxBoundingRect.top + boxBoundingRect.height / 2 }; document.addEventListener("mousemove", e => { boxBoundingRect = box.getBoundingClientRect(); boxCenter = { x: boxBoundingRect.left + boxBoundingRect.width / 2, y: boxBoundingRect.top + boxBoundingRect.height / 2 }; let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI); box.style.transform = `rotate(${angle}deg)`; })
.box { background-color: black; width: 30px; height: 30px; position: absolute; left: 200px; top: 200px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="box" id="image"> </div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.