Pointing to mouse position Jquery

StackOverflow https://stackoverflow.com/questions/7660254

  •  07-02-2021
  •  | 
  •  

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>
Was it helpful?

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/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top