-1

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

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

1 回答 1

0

认为我发现了一个问题：

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

于 2011-10-05T11:09:40.870 回答