jquery - How to Rotate image that follows cursor in JavaScript? - Stack Overflow

admin管理员组

文章数量:1279117

I have image that is following mouse's cursor.

HTML:

<img id="cow" src=".png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/> 

Javascript:

var mouseXY = {};
$( document ).on( "mousemove", function( event ) {
  mouseXY.X = event.pageX; 
  mouseXY.Y = event.pageY;
});
var iCow = $("#cow");
var cowInterval = setInterval(function()
{
  var cowXY = iCow.position();
  var diffX = cowXY.left - mouseXY.X;
  var diffY = cowXY.top - mouseXY.Y;
  var newX = cowXY.left - diffX / 1000;
  var newY = cowXY.top - diffY / 1000;
  iCow.css({left: newX, top: newY});
}, 10);

JSFiddle example

How can I rotate image in the direction of cursor?
I have tried to do it with transform: rotate():

var cowInterval = setInterval(function()
{
  var cowXY = iCow.position();
  var diffX = cowXY.left - mouseXY.X;
  var diffY = cowXY.top - mouseXY.Y;
  var newX = cowXY.left - diffX / 1000;
  var newY = cowXY.top - diffY / 1000;
  var tan = diffX / diffY;
  var atan = Math.atan(tan);
  iCow.css({left: newX, top: newY, transform: "rotate(" +((-1)*atan - Math.PI/2)+ "rad)"});
}, 10);

but unsuccessfully

I have image that is following mouse's cursor.

HTML:

<img id="cow" src="https://icons.iconarchive./icons/gakuseisean/ivista-2/128/Alarm-Arrow-Right-icon.png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/> 

Javascript:

var mouseXY = {};
$( document ).on( "mousemove", function( event ) {
  mouseXY.X = event.pageX; 
  mouseXY.Y = event.pageY;
});
var iCow = $("#cow");
var cowInterval = setInterval(function()
{
  var cowXY = iCow.position();
  var diffX = cowXY.left - mouseXY.X;
  var diffY = cowXY.top - mouseXY.Y;
  var newX = cowXY.left - diffX / 1000;
  var newY = cowXY.top - diffY / 1000;
  iCow.css({left: newX, top: newY});
}, 10);

JSFiddle example

How can I rotate image in the direction of cursor?
I have tried to do it with transform: rotate():

var cowInterval = setInterval(function()
{
  var cowXY = iCow.position();
  var diffX = cowXY.left - mouseXY.X;
  var diffY = cowXY.top - mouseXY.Y;
  var newX = cowXY.left - diffX / 1000;
  var newY = cowXY.top - diffY / 1000;
  var tan = diffX / diffY;
  var atan = Math.atan(tan);
  iCow.css({left: newX, top: newY, transform: "rotate(" +((-1)*atan - Math.PI/2)+ "rad)"});
}, 10);

but unsuccessfully

• javascript
• jquery
• html

Share Improve this question Follow edited Sep 19, 2016 at 12:32 user6837640 8211 silver badge99 bronze badges asked Sep 19, 2016 at 11:30 IlyaIlya 29.7k1919 gold badges118118 silver badges161161 bronze badges 6

• 1 I guess the problem is with get position() . Even without moving , the position value keep changing just by transform rotate. You can see the console log. jsfiddle/q9kn8ady/4 – cjmling Commented Sep 19, 2016 at 12:11
• Above ment may not matter or the real cause but anyway for image rotate I found this fiddle which seems to be more accurate rotate. jsfiddle/22Feh/556 from here stackoverflow./questions/7195825/… – cjmling Commented Sep 19, 2016 at 12:41
• jsfiddle/22Feh/5 :- answered in some ment in stackoverflow./questions/7195825/… – Dipendra Singh Commented Sep 19, 2016 at 12:43
• @DipendraSingh it break when u try to move it. – cjmling Commented Sep 19, 2016 at 12:45
• @cjmling replace the image with yours – Dipendra Singh Commented Sep 19, 2016 at 12:45

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 10

You need to change only the transform(rotate) css property when changing the cursor postion, keeping in mind that the cursor actually changed position.

Add these two if-else condition to make the image rotate in the correct direction

 if(diffY > 0 && diffX > 0) {

    atan += 180; 
  }
 else if(diffY < 0 && diffX > 0) {

    atan -= 180;
  }

I suppose this is what you want.

var mouseXY = {};
    $( document ).on( "mousemove", function( event ) {
      mouseXY.X = event.pageX; 
      mouseXY.Y = event.pageY;
    });
    var iCow = $("#cow");
    var prevXY = {X: null, Y: null};
    var cowInterval = setInterval(function()
    {
    
      
      if(prevXY.Y != mouseXY.Y || prevXY.X != mouseXY.X && (prevXY.Y != null || prevXY.X != null)) {
      
      var cowXY = iCow.position();
      var diffX = cowXY.left - mouseXY.X;
      var diffY = cowXY.top - mouseXY.Y;
      var tan = diffY / diffX;
     
      var atan = Math.atan(tan)* 180 / Math.PI;;
       if(diffY > 0 && diffX > 0) {
      
      	atan += 180; 
      }
      else if(diffY < 0 && diffX > 0) {
      
      	atan -= 180;
      }
      
      prevXY.X = mouseXY.X;
      prevXY.Y = mouseXY.Y;
      iCow.css({transform: "rotate(" + atan + "deg)"});
    }
    }, 10);

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="cow" src="https://icons.iconarchive./icons/gakuseisean/ivista-2/128/Alarm-Arrow-Right-icon.png" height="30px" width="30px" style="position: absolute; top: 50%; left: 50%;"/>

本文标签： jqueryHow to Rotate image that follows cursor in JavaScriptStack Overflow