Pointing to mouse position Jquery

Question

I am trying to make a pointer that moves according to the position of your mouse.

I am using Jquery and transforming the radians to degrees, and a plugin for jquery that is called rotate.I set up all the conditions butt the pointer will not have a continuous animation.

Here`s the code:

<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="rotate.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>
<link rel='stylesheet' type='text/css' href='style.css' media='all' />




<script type="text/javascript">
$(document).ready(function(){

$(document).mousemove(function(e){
      <!--$('#log2').html(e.pageX +', '+ e.pageY);-->
   var radian = Math.atan2(e.pageY, e.pageX);

   var grade = radian/(Math.PI/360);


   $('#log2').html(grade);

   $(document).mousemove(function(){
   $('#img').animateMe({rotate: grade});



                                  });

   }); 


}); 
</script>



</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">

             <img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />

</div>
<script type="text/javascript">

var radian = $(document).bind('mousemove',function(e){ 
           $("#log1").text(Math.atan2(e.pageY, e.pageX));
}); 

var grade = radian/(Math.PI/180);








</script>

<script type="text/javascript">
            $(document).ready(function(){
            $(document).bind('mousemove',function(e){ 
            $("#log").text(e.pageX +', '+ e.pageY);
}); 



}); 

</script>





</body>
</html>

Thx you all for your help!

This is the new code

<html>
<head>
<title>Pagina test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://cloud.github.com/downloads/heygrady/transform/jquery.transform-0.9.3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script>


<link rel='stylesheet' type='text/css' href='style.css' media='all' />
<script type="text/javascript">

$(document).mousemove(function(e){      
    var radian = Math.atan2(e.pageY, e.pageX);       
    var grade = radian/(Math.PI/720);       
    $('#log2').html('grade:'+grade+' :: radian:'+radian); 
    $('#img').animate({rotate: grade});
});


</script>
</head>
<body>
<div id="log"></div>
<div id="log1"></div>
<div id="log2"></div>
<div id="patrat">

             <img src="arrow.png" alt="" width="300" height="300" border="0" id="img" title="" />

</div>






</body>
</html>

If you are looking for a custom pointer then you can use that http://stackoverflow.com/questions/336925/custom-cursor-image-css — KodeFor.Me, Oct 05 '11 at 11:00
No I`m looking for a way to rotate a image according to the mouse position — John the horn, Oct 05 '11 at 14:28

totallyNotLizards · Accepted Answer · 2011-10-05T14:54:46.357

0

Think I've spotted a problem:

<!--$('#log2').html(e.pageX +', '+ e.pageY);-->

That's an HTML comment tag, inside javascript it will break so use // instead - i.e:

//$('#log2').html(e.pageX +', '+ e.pageY);

After fixing this you might find that your script works. If this doesn't help, please post a fiddle (http://jsfiddle.net) showing broken behaviour and comment on exactly how it should behave.

Hope this helps

EDIT: No offense but your code is pretty dire. Try this (stripped down and fixed):

$('body').mousemove(function(e){      
    var radian = Math.atan2(e.pageY, e.pageX);       
    var grade = radian/(Math.PI/360);       
    $('#log2').html('grade:'+grade+' :: radian:'+radian); 
    $('#img').animate({rotate: grade});
});

To name a few, 'animateMe' is not a function, 'animate' is. There was a second $(document).mousemove(function(){..}); line in there that didn't have a close bracket - little wonder this didn't work.

And remove all the other script tags from your page, a few of them are binding mousemove events where you have already bound them - either remove them or roll them into the one handler.

Example fiddle: http://jsfiddle.net/uRpag/1/

2nd Edit: Your plugin's rotate method needs to have 'deg' in the property. Try this code:

$('#img').animate({rotate: grade+'deg'});

Instead of

$('#img').animate({rotate: grade});

Last edit:

One last thing you needed to do was .stop() the animation when the mouse moved again - otherwise hundreds of animate functions would queue up when you move the mouse more than a couple of pixels.

$('#img').stop(true, true).animate({rotate: grade+'deg'});

Job done :)

http://jsfiddle.net/uRpag/4/

edited Oct 05 '11 at 14:54

answered Oct 05 '11 at 11:09

totallyNotLizards

8,489
9
51
85

Thx for that but it`s not making the animation continuous – John the horn Oct 05 '11 at 11:21
my problem is that the number is not feed corectly to the rotate why this happens i don`t know – John the horn Oct 05 '11 at 12:44
can you link to the exact rotate plugin you are using? – totallyNotLizards Oct 05 '11 at 13:28
i want the image to rotate according to the degrees; grade in translation means degrees so if the pointer is at 90 degrees the image must rotate at this angle thx for your time – John the horn Oct 05 '11 at 14:20
without a link to the plugin you are using to rotate the image, I can't give you any more detail - but with this debugged code as a starting point you should be able to come up with a working app yourself – totallyNotLizards Oct 05 '11 at 14:22
not working still goes to the first angle and does not move :( – John the horn Oct 05 '11 at 14:42
You are a god and as they say in my language "sa-ti dea Dumnezeu sanatate" translation may God give you health. But can you help me constrain the max and min values of x and y because the motion on the left side is a bit strange? I`ll open a new question ore you could give me a instant chat service facebook or YM – John the horn Oct 05 '11 at 15:04

Pointing to mouse position Jquery

1 Answers1