jQuery가 단일 div의 왼쪽이나 오른쪽 위로 마우스를 가져 가면

사진 갤러리가 있습니다. 건물에서 작업 중이며, 가리키고 숨기고 가리키기에 따라 불투명도를 변경하는 이전 및 다음 버튼이 있습니다. 지금은 이미지 주위에 래퍼가 있습니다. 그런 다음 두 개의 div가 50 % 너비 안에 있고 이전에는 왼쪽으로, 다음은 오른쪽으로 배치됩니다. 대신 왼쪽 또는 오른쪽으로 단일 div 래퍼의 50 % 위로 마우스를 가져갈 때이를 감지하여이 작업을 수행하려고합니다. 래퍼는 또한 가능한 다양한 너비가 있으며, 화면 크기에 맞게 100 % 너비를 사용합니다.jQuery가 단일 div의 왼쪽이나 오른쪽 위로 마우스를 가져 가면

$(".photo-previous, .photo-next").hover(function() 
{ 
$(this).fadeTo(100, 1); 
}, 
function() 
{ 
$(this).fadeTo(100, 0.5); 
} 
);

마우스 위치 대신 .photo-previous 및 .photo-next 사용 :

나는 그것을 교체 할.

출처

2012-04-07 Dylan Cross

현재 구현이 나에게 더 우아 해 보입니다. – mrtsherman

현재 구현에있어 무엇이 잘못 되었습니까? –

나는이 방법을 잘 알고있다. 그리고 이것이 내가 항상 해왔 던 방법인데, 이것에 대해 나를 괴롭히는 두 가지가있다. 하나는 이미지를 덮어서 "이미지 저장"이나 "이미지 위치 복사"를 할 수 없다는 것이다. 등등 두 - jQuery의 애니메이션은 절대 위치를 가지고 이러한 요소에 비트 slugging 것, 나는 그들이 그렇게하는 경향이있다 읽었습니다. 아마도 그 문제는 관련이 없지만 확실하지 않습니다. –

mousemove 이벤트를 사용하십시오.

$("#photoContainer").on('mousemove', function(e) { 
    var mouseSide; 
    if ((e.pageX - this.offsetLeft) < $(this).width()/2) { 
     mouseSide = 'L'; 
    } else { 
     mouseSide = 'R'; 
    } 
});

데모 : fiddle

편집 : - this.offsetLeft 업데이트 바이올린을 추가했습니다.

출처

2012-04-07 06:11:23

upvoted, 왜냐하면 내 대답은 초기 롤오버 만 처리하고 컨테이너 주위로 마우스를 움직이지 않기 때문입니다. –

이미 다른 구현이 마음에 들었지만 실제로는 다른 방법으로 사용하려는 경우 마우스 이벤트의 e.pageX 및 e.pageY 멤버를 사용할 수 있습니다. 그럼 당신은 뭔가를 할 수 ...

그리고 그게 정말 동적 래퍼의 너비가 중요하지 않습니다.

jquery UI의 마우스 플러그인에는 상대적인 마우스 위치를 가져 오는 메소드가 내장되어 있습니다.

출처

2012-04-07 05:57:05

-1

이런 일을 쉽게 처리 할 수있는 마우스 오버 기능이 있습니다.

출처

2012-04-07 05:59:07 corvid

jQuery가 단일 div의 왼쪽이나 오른쪽 위로 마우스를 가져 가면

답변

관련 문제