指向鼠标位置jquery

-1

我正在试图根据您的鼠标的位置进行移动的指针。指向鼠标位置jquery

我正在使用jquery并将弧度转换为度数，并为jquery插件称为rotate.I设置所有条件，但指针将不会有连续的动画。

Here`s代码：

<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大家的帮助！

这是新的代码

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

来源

2011-10-05 John the horn

如果你正在寻找一个自定义指针，那么你可以使用http://stackoverflow.com/questions/336925/custom-cursor-image- css –

不，我正在寻找一种方法来根据鼠标位置旋转图像 –

想我发现了一个问题：

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

这是一个HTML注释标记，JavaScript的内部会打破这样使用//代替 - 即：

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

解决此问题后，您可能会发现您的脚本有效。如果这没有帮助，请张贴小提琴（http://jsfiddle.net）显示行为不当，并评论它应如何应行为。

希望这有助于

编辑：没有违法，但你的代码是非常可怕的。试试这个（剥离下来，固定式）：

$('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}); 
});

仅举几例， 'animateMe' 不是一个功能， 'animate' 的。在那里还有第二条$(document).mousemove(function(){..});线，没有一个紧密的支架 - 没有什么奇迹这没有奏效。

并从您的页面中删除所有其他脚本标记，其中一些绑定了您已经绑定它们的mousemove事件 - 将它们移除或将它们滚动到一个处理程序中。

例小提琴： http://jsfiddle.net/uRpag/1/

2日编辑：你的插件的旋转方法需要有“度”的属性。试试这个代码：

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

而不是

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

最后编辑：

你需要做的是.stop()动画当鼠标再次移到最后一两件事 - 否则数以百计的动画功能当您将鼠标移动超过几个像素时会排队。

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

作业已完成:)

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

来源

2011-10-05 11:09:40 jammypeach

Thx的，但它不会使动画连续 –

我的问题是，该数字是不真实馈送旋转为什么发生这种情况我不知道 –

你能链接到你正在使用的确切的旋转插件吗？ – jammypeach

指向鼠标位置jquery

回答

相关问题