指向鼠标位置Jquery答案

【问题标题】：Pointing to mouse position Jquery指向鼠标位置Jquery
【发布时间】：2011-10-05 10:58:56
【问题描述】：

我正在尝试制作一个根据鼠标位置移动的指针。

我正在使用 Jquery 并将弧度转换为度数，以及一个名为 rotate 的 jquery 插件。我设置了所有条件，但指针不会有连续动画。

代码如下：

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

感谢大家的帮助！

这是新代码

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

【问题讨论】：

如果您正在寻找自定义指针，那么您可以使用 stackoverflow.com/questions/336925/custom-cursor-image-css
不，我正在寻找一种根据鼠标位置旋转图像的方法

标签： javascript jquery math atan2

【解决方案1】：

认为我发现了一个问题：

<!--$('#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/

第二次编辑：您的插件的旋转方法需要在属性中包含“度”。试试这个代码：

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

代替

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

最后编辑：

您需要做的最后一件事是.stop() 鼠标再次移动时的动画 - 否则当您移动鼠标超过几个像素时，数百个动画函数将排队。

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

工作完成:)

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

【讨论】：

谢谢，但它不会使动画连续
我的问题是这个数字没有正确地提供给旋转为什么会发生这种情况我不知道
你能链接到你正在使用的确切旋转插件吗？
我希望图像根据度数旋转；平移等级表示度数，因此如果指针位于 90 度，则图像必须以这个角度旋转，谢谢您的时间
没有指向您用于旋转图像的插件的链接，我无法为您提供更多详细信息 - 但以这个调试代码为起点，您应该能够想出一个自己工作的应用程序