jQuery MouseMove

Question

마우스를 왼쪽과 오른쪽으로 움직일 때 세 개의 이미지로 바뀌는 이미지를 갖고 싶습니다. 커서가 커서가 오른쪽 화살표를 표시하는

오른쪽 중앙에있을 때 커서가 켜져있을 때 위쪽 화살표를 보여주기 위해 왼쪽

센터에있을 때

는

• 왼쪽 왼쪽 화살표를 표시합니다 오른쪽.

잘 작동하는 jQuery 스크립트를 발견했습니다. 마우스를 움직이면 왼쪽 화살표와 오른쪽 화살표가 표시됩니다. 나는 중심 부분을 남겨두고 추가하는 방법을 모르겠습니다.

다음은 내가 가지고있는 것입니다.

var image_src = { 
    left: "http://i.imgur.com/ubKrq.jpg", 
    right: "http://i.imgur.com/SxHCS.jpg", 
}; 

$(document).mousemove(function(event){ 
    var mloc = { 
     x: event.pageX, 
     y: event.pageY 
    }; 

    if( 
     (mloc.x >= 0 && mloc.x <= $(document).width()/2) 
    ){ 
     $(".arrow").attr("src", image_src.left); 
    }else if( 
     (mloc.x >= $(document).width()/2 && mloc.x <= $(document).width()) && 
     (mloc.y >= 0 && mloc.y <= $(document).height()/2) 
    ){ 
     $(".arrow").attr("src", image_src.right); 
    } 

});​ 

또 다른 질문을 - 당신은 이미지 아래에 마우스를 이동하면 작동하지 않습니다 : (http://jsfiddle.net/WhkJB/ 또한 jsFiddle 페이지를 참조하십시오). 어쨌든 그것을 만들어서 페이지 전체에서 움직 이도록 할 수 있습니까?

도움을 주시면 감사하겠습니다.

Answer 1

먼저 X 위치 비율을 계산 한 다음 간단한 if을 적용 할 수 있습니다.

즉 :

var image_src = { 
    left: "http://i.imgur.com/ubKrq.jpg", 
    right: "http://i.imgur.com/SxHCS.jpg", 
    up: "http://i.imgur.com/SxHCS.jpg" // replace with UP image 
}; 

$(document).mousemove(function(event){ 
    var xPercent = (event.pageX/$(document).width()) * 100; 
    if(xPercent <= 40) { // show left 
     $(".arrow").attr("src", image_src.left); 
    } 
    else if(xPercent >= 60) { // show right 
     $(".arrow").attr("src", image_src.right); 
    } 
    else { // show up 
     $(".arrow").attr("src", image_src.up); 
    } 
});​​​