Search code examples
javascriptjquerymathatan2

Pointing to mouse position Jquery

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>
Solution

  • 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/