-1

マウスの位置に応じて動くポインターを作ろうとしています。

私はJqueryを使用してラジアンを度に変換し、rotate.Iと呼ばれる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' です。そこには閉じ括弧のない 2$(document).mousemove(function(){..});行目がありました - これがうまくいかなかったのも不思議ではありません。

ページから他のすべてのスクリプト タグを削除します。それらのいくつかは、既にバインドされている mousemove イベントをバインドしています。それらを削除するか、1 つのハンドラーにロールインします。

フィドルの例: http://jsfiddle.net/uRpag/1/

2 番目の編集: プラグインの回転メソッドには、プロパティに「deg」が必要です。このコードを試してください：

$('#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 に答える