2011-01-31 4 views
9

좋아요,이 방법은 마우스를 따라 가기에 완벽하게 작동합니다.jquery에서 마우스를 따라 움직이는 방법

// 
$(document).mousemove(function(e){ 
    $("#follower").css({ 
     'top': e.pageY + 'px'; 
     'left': e.pageX + 'px'; 
    }); 
}); 
// 

그리고 이것은 클릭 포인트

// 
$(document).click(function(e){ 
    $("#follower").animate({ 
     top: e.pageY + 'px'; 
     left: e.pageX + 'px'; 
    }, 800); 
}); 
// 

하지만 개인적으로는 논리적으로이 일을해야 기분에 마우스를 애니메이션 위대한 작품! webscripter로서 내 관점에서 왔어. Amd 그때 내 질문은, 어떻게이 일을 할 수 있는가입니다. #follower가 내 마우스에 역동적 인 느낌을 느낄 수 있도록 노력하겠습니다.

// 
$(document).mousemove(function(e){ 
    $("#follower").animate({ 
     top: e.pageY + 'px'; 
     left: e.pageX + 'px'; 
    }, 800); 
}); 
// 

답변

31

어떻게하여 setInterval과 방정식이라고 제논의 역설 사용에 관한 : 나는 보통 그것을 할 방법이다

http://jsfiddle.net/88526/1/

합니다.

요청에 따라이 대답에 코드를 포함 시켰습니다.

CSS :

#follower{ 
    position : absolute; 
    background-color : red; 
    color : white; 
    padding : 10px; 
} 

HTML :

<div id="follower">Move your mouse</div> 

JS/w jQuery를 : 절대 위치와 사업부 감안할 때

var mouseX = 0, mouseY = 0; 
$(document).mousemove(function(e){ 
    mouseX = e.pageX; 
    mouseY = e.pageY; 
}); 

// cache the selector 
var follower = $("#follower"); 
var xp = 0, yp = 0; 
var loop = setInterval(function(){ 
    // change 12 to alter damping, higher is slower 
    xp += (mouseX - xp)/12; 
    yp += (mouseY - yp)/12; 
    follower.css({left:xp, top:yp}); 

}, 30); 
+0

감사 Zevan, 그 권리를 거하려고 해요 지금. 내가 방정식에 문제가 있다면 나는 돌아올거야 :) –

+0

와우, 당신은 나를 위해 그것을 전부했다. 너는 그 사람이야. 이 답변이 SO에 직접 게시되면 커뮤니티에 도움이 될 수 있습니다. 이 질문에 답안을 편집해도 될까요? –

+1

이제 코드를 추가하겠습니다. – Zevan

관련 문제