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

Question

나는 사용 중입니다 이것 내 썸네일의 팝업 이미지를 갖는 기술. 유일한 문제는 썸네일이 화면의 한쪽 가장자리에 가깝고 원본 이미지가 실제로 크면 화면 가장자리에 의해 잘린다는 것입니다.

JavaScript가 필요하다는 것을 알고 있지만 이미지가 볼 수있는 화면 외부에 있음을 감지 한 다음 썸네일의 다른쪽으로 전환하는 방법을 완전히 확신하지 못합니다.

어떻게 할 수 있습니까?

Answer 1

계산을 수행해야하지만 가능합니다. 위의 플러그인을 사용하면 다음과 같은 작업을 수행합니다 ... :

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

   });

이것은 이미지가 브라우저 외부에 있음을 알려줍니다. 또한 이것은 여백을 고려하지 않습니다. 당신은 더 좋아하는 일을하고 싶을 수도 있습니다

   $('.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는 xxpx를 반환 할 때 사용됩니다 (xx는 숫자 값입니다). Parseint는 그것을 제거 할 것입니다 ... 플러그인이있을 수 있지만 처음부터 그것을 원한다면 이것은 좋은 시작입니다.

이미지 자체를 옮기는 것은 내가 여기서 다루지 않은 또 다른 문제이지만, 이것이 당신에게 확실한 시작을 가져야한다고 생각합니다.