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

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

Я использую 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>

javascript jquery math atan2
person John the horn    schedule 05.10.2011    source источник
comment
Если вы ищете собственный указатель, вы можете использовать этот stackoverflow.com /questions/336925/custom-cursor-image-css   -  person KodeFor.Me    schedule 05.10.2011
comment
Нет, я ищу способ повернуть изображение в соответствии с положением мыши   -  person John the horn    schedule 05.10.2011

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

Вместо

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

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

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

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

Работа выполнена :)

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

person totallyNotLizards    schedule 05.10.2011
comment
Спасибо за это, но это не делает анимацию непрерывной - person John the horn; 05.10.2011
comment
моя проблема в том, что число не правильно подается на ротацию, почему это происходит, я не знаю - person John the horn; 05.10.2011
comment
Можете ли вы дать ссылку на точный плагин поворота, который вы используете? - person totallyNotLizards; 05.10.2011
comment
я хочу, чтобы изображение вращалось в соответствии с градусами; оценка в переводе означает градусы, поэтому, если указатель находится на 90 градусов, изображение должно поворачиваться на этот угол, спасибо за ваше время. - person John the horn; 05.10.2011
comment
без ссылки на плагин, который вы используете для поворота изображения, я не могу дать вам более подробную информацию, но с этим отлаженным кодом в качестве отправной точки вы сможете самостоятельно придумать работающее приложение. - person totallyNotLizards; 05.10.2011
comment
не работает все равно идет в первый угол и не двигается :( - person John the horn; 05.10.2011
comment
Ты бог и как говорится на моем языке sa-ti dea Dumnezeu sanatate перевод дай бог тебе здоровья. Но не могли бы вы помочь мне ограничить максимальное и минимальное значения x и y, потому что движение с левой стороны немного странное? Я открою новый вопрос или вы могли бы дать мне службу мгновенного чата facebook или YM - person John the horn; 05.10.2011