如何检测图像在（浏览器）屏幕之外，然后将其移动？

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将删除...可能有一个插件，但是如果您想从头开始，这是一个好的开始。

移动图像本身是我在这里尚未解决的另一个问题，但是我认为这应该为您提供一个坚实的开端。