객체

Question

를 유혹 할 때 X를 업데이트하고 Y 좌표 방법 내가 이런 DIV 내부를 클릭 할 때 위치를 변경하는 이미지가 있습니다

mainDiv.click(function (e) { 

    var mouseX = e.clientX, 
     mouseY = e.clientY; 

     test2 = Math.atan(mouseY/mouseX); 
     test3 = ((test2 * 180)/3.14); 

     $("#hgun").rotate(test3); 
}); 

을하지만 사업부 내부를 클릭 할 때 그것은 단지 위치를 변경합니다. div 안에 마우스를 올리면 위치를 어떻게 바꿀 수 있습니까?

Answer 1

.hover() 메소드는 mouseenter 및 mouseleave 이벤트에 대한 핸들러를 바인드합니다. 마우스를 요소 내에 사용하는 동안 요소에 비헤이비어를 적용하는 데 사용할 수 있습니다.

는 다음과 같이 호출됩니다에 대한 짧은

$(selector).hover(handlerIn, handlerOut) 

: 귀하의 경우

$(selector).mouseenter(handlerIn).mouseleave(handlerOut); 

가 될 것입니다 :

mainDiv.hover(function (e) { 
     var mouseX = e.clientX, 
      mouseY = e.clientY; 

     test2 = Math.atan(mouseY/mouseX); 
     test3 = ((test2 * 180)/3.14); 
     $("#hgun").rotate(test3); 
    }, 
function (e) { 
    //On mouseleave 
}); 

난 당신이 달성하기 위해 노력하고 정확히 잘 모르겠지만, 당신이 당신의 계산을 원하는 경우

: 저자의 의견에 따라, 업데이트jQuery hover documentation, jQuery mouse events

---

:

는 또한 읽기 컨테이너 내에서 마우스를 움직일 때마다 수행 할 관련 작업은 mousemove 이벤트를 사용할 수 있습니다.

http://jsfiddle.net/sQ4Z4/1/ 난 당신이 사용 된하지 않을 수도 있습니다 내가 찾은 첫 번째 jQuery Rotate Plugin을 사용하지만 충분히해야한다 :

내가 당신의 코드를 기반으로 간단한 바이올린을 해봤 는을 확인해 올바른 방향으로 가라.

기본적으로 당신의 코드는 다음과 같이 보일 것입니다 : 모든 [JQuery와 마우스 이벤트]에서

mainDiv.mousemove(function (e) { 
    var mouseX = e.clientX, 
     mouseY = e.clientY; 

    test2 = Math.atan(mouseY/mouseX); 
    test3 = ((test2 * 180)/3.14); 
    $("#hgun").rotate(test3); 
}); 

Answer 2

변경이 라인 :

mainDiv.click(function (e) {

hovermainDiv.hover(function (e) {

로 두 가지 기능을 승인 : 첫 번째는 두 번째 mouseleave, mouseenter 실행된다.