Вращение с перемещением мыши

Question

Что-то, что я хотел узнать уже довольно давно, но не смог понять.

http://jsfiddle.net/Mobilpadde/Xt7ag/

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

Это что-то простое, или 3k строк? (Или, может быть, плагин jQuery?)

Answer 1

Хийя Я получил это что-то более близкое, используя старый пост шахты: демоhttp://jsfiddle.net/Z3pGQ/3/

Я до сих пор работаю, будет Флик вам более плавной версия или, если вы можете улучшить до меня :

Старого сообщение: Rotating an element based on cursor position in a separate element

Надеется, что это помогает, я пытаюсь сделать ее более гладкой сейчас, ура

Пример кода

$(document).ready(function() { 
    $(document).mousemove(function(e) { 
     $(".firefly").css({ 
      "top": (e.pageY * 2) + "px", 
      "left": (e.pageX * 2 + 130) + "px" 
     }); 
    }) 
}) 
var img = $(".firefly"); 
if (img.length > 0) { 
    var offset = img.offset(); 

    function mouse(evt) { 
     var center_x = (offset.left) + (img.width()/2); 
     var center_y = (offset.top) + (img.height()/2); 
     var mouse_x = evt.pageX; 
     var mouse_y = evt.pageY; 
     var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y); 
     var degree = (radians * (180/Math.PI) * -1) + 90; 
     img.css('-moz-transform', 'rotate(' + degree + 'deg)'); 
     img.css('-webkit-transform', 'rotate(' + degree + 'deg)'); 
     img.css('-o-transform', 'rotate(' + degree + 'deg)'); 
     img.css('-ms-transform', 'rotate(' + degree + 'deg)'); 
    } 
    $(document).mousemove(mouse); 
}​ 

Изображение

Answer 2

Это будет связано с гораздо большей математикой, чем я хочу сделать прямо сейчас, но вы можете легко применять вращения с помощью css. Вот свойства для mozilla и webkit, вы можете увидеть остальную часть (IE, Opera ...) at this page. Вот ваша функция с вращением 120deg. Вам все равно нужно будет рассчитать правильное вращение и отрегулировать соответственно left и top.

$(document).mousemove(function(e){ 
       $(".firefly").css({ 
        "top":(e.pageY*2)+"px", 
        "left":(e.pageX*2+130)+"px", 
        "-moz-transform": "rotate(120deg)", 
        "-webkit-transform": "rotate(120deg)"}); 
      }) 

Answer 3

Существует плагин JQuery для этого http://pixelscommander.com/en/iphone-development/rotate-html-elements-with-mouse/