Указывая на положение мыши Jquery - PullRequest
Новая
       42

Указывая на положение мыши Jquery

0 голосов
/ 05 октября 2011

Я пытаюсь сделать указатель, который перемещается в соответствии с положением вашей мыши.

Я использую Jquery и преобразовываю радианы в градусы, а также плагин для jquery, который называется rotate. Я установил все условия, но указатель не будет иметь непрерывную анимацию.

Вот код: 

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

1 Ответ

0 голосов
/ 05 октября 2011

Думаю, я заметил проблему: 

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

Это тег комментария HTML, внутри javascript он сломается, поэтому используйте // вместо него - т.е.: 

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

После исправления вы можете обнаружить, что ваш скрипт работает. Если это не помогло, пожалуйста, опубликуйте скрипку (http://jsfiddle.net), показывающую неправильное поведение и прокомментируйте, как именно должен вести себя.

Надеюсь, это поможет

EDIT: Без обид, но ваш код довольно ужасен. Попробуйте это (урезано и исправлено): 

$('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(){..});, у которой не было закрывающей скобки - неудивительно, что это не сработало.

И удалите все остальные теги сценариев со своей страницы, некоторые из них привязывают события перемещения мыши, когда вы уже связали их - либо удалите их, либо сверните их в один обработчик.

Пример скрипта: http://jsfiddle.net/uRpag/1/

2-е редактирование: Метод rotate вашего плагина должен иметь 'deg' в свойстве. Попробуйте этот код: 

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

вместо 

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

Последнее редактирование:

Последнее, что вам нужно было сделать, - это .stop() анимация при повторном перемещении мыши - в противном случае сотни анимационных функций встали бы в очередь при перемещении мыши более чем на пару пикселей. 

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

Работа сделана:)

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

...