Question

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

我正在使用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>

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

第二编辑：你的插件的旋转方法需要在属性中具有'deg'。试试这段代码：

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

而不是

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

上次修改：

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

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

完成工作：）

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

指向鼠标位置Jquery

1 个答案: