Image follow cursor or rotate as it moves-CodePudding

im trying to find a way to make an image move or follow the mouse cursor. Basically i have a radial pie menu and i'd like the image thats in the middle of it, to spin and rotate as the mouse mouves.

Any ideias how i can do that?

Appreciate the help!!!

Radial

CodePudding user response：

first what you can do is make the image or the element that you want to follow the cursor to absolute position

#image {
position:absolute;
}

then, you can set left and top poosition of the image that equal to cursor position with mousemove event example with jquery

$(document).mousemove(function(e){
    $("#image").css({left:e.pageX, top:e.pageY});
});

or you can do it just with vanilla JavaScript

document.addEventListener('mousemove', function(e) {
  let body = document.querySelector('body');
  let image = document.getElementById('image');
  let left = e.offsetX;
  let top = e.offsetY;
  image.style.left = left   'px';
  image.style.top = top   'px';
});

Hopefully my answer can help you.