이미지가 (브라우저) 화면 밖에있는 것을 어떻게 감지하고 이동합니까?

this 기술을 사용하여 내 미리보기 이미지의 팝업 이미지를 가지고 있습니다. 유일한 문제는 썸네일이 화면의 한 가장자리에 가까우며 원본 이미지가 실제로 크기가 클 경우 화면 가장자리로 잘릴 수 있다는 것입니다.이미지가 (브라우저) 화면 밖에있는 것을 어떻게 감지하고 이동합니까?

자바 스크립트가 필요하다는 것을 알고 있지만, 이미지가 보이는 화면 밖에 있는지 확인한 다음 미리보기 이미지의 다른면으로 전환하는 방법을 잘 모릅니다.

어떻게하면됩니까?

출처

2010-02-04 Atomix

중복 : http://stackoverflow.com/questions/2079521/how-can-i-get-jquery-to-call-an-event-handler-when-an-image-actually-appears-on-s/2079537 # 2079537 –

@ Pekka 이미지가 화면에서 약 반 밖에 없으므로 작동하지 않을 것이라고 생각합니다. 플러그인이 화면에서 완전히 벗어난 경우에만 작동하는 것처럼 보입니까? – Atomix

아, 그게 더 어렵습니다. 그것은 currrent 스크롤 위치와 이미지의 오프셋 위치를 사용하여 확실히 할 수 있지만, 나는 JQuery에서 내 머리 꼭대기에 그것을 적어 둘만큼 충분히 경험하지 못했습니다. 플러그인이하는 일을 살펴 보거나 누군가가 여기 와서 출발점을 만들 수 있습니다. –

일부 계산이 필요하지만 가능합니다. 위의 플러그인을 사용하면 다음과 같은 작업을 수행 할 수 있습니다. :

$('.thumb').mouseover(function() { 
    if(($(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width())) < 0) { 
     //Change the position here.. 
     alert("Out of browser"); 
    } 

    });

이 이미지는 브라우저 외부에 있음을 알 수 있습니다. 또한 마진을 고려하지 않습니다. it'l이 (xx는 숫자 가치) xxpx 반환과 같이 주에서는 parseInt를 사용하는 것이 더

$('.thumb').mouseover(function() { 
    if(($(window).width() - ($(this).siblings('.popup').position().left + $(this).siblings('.popup').width() + parseInt($(this).siblings('.popup').css("margin-left") + parseInt($(this).siblings('.popup').css("margin-right"))) < 0) { 
     //Change the position here.. 
     alert("Out of browser"); 
    } 

    });

처럼 수행 할 수 있습니다. parseInt는 스트립을 제거합니다 ... 플러그인이있을 수 있지만 처음부터 다시 시작하려는 경우에는 좋은 시작입니다.

이미지 자체를 이동하는 것은 내가 여기에 달려 들지 않은 또 다른 문제이지만 이것이 당신에게 확실한 시작을 제공한다고 생각합니다.

출처

2010-02-04 23:12:15 CogitoErgoSum

이미지가 (브라우저) 화면 밖에있는 것을 어떻게 감지하고 이동합니까?

답변

관련 문제