如何检测图像在（浏览器）屏幕之外然后移动它？答案

【问题标题】：How do I detect that Image is outside of (browser)screen and then move it?如何检测图像在（浏览器）屏幕之外然后移动它？
【发布时间】：2010-02-04 20:27:24
【问题描述】：

我正在使用this 技术来弹出缩略图的图像。唯一的问题是，如果缩略图靠近屏幕的一个边缘，并且原始图像非常大，那么它就会被屏幕边缘截断。

我知道它需要 Javascript，但我不完全确定如何检测图像在可视屏幕之外，然后将其切换到缩略图的另一侧。

我该怎么做？

【问题讨论】：

复制：stackoverflow.com/questions/2079521/…
@Pekka 我认为这行不通，因为图像仅离屏幕大约一半。插件似乎只有在完全离开屏幕时才有效？
啊，那就更难了。使用当前的滚动位置和图像的偏移位置绝对是可行的，但是我在 JQuery 方面的经验不足，无法将其写下来。你可以看看插件做了什么，或者有人可能会来这里创建一个起点。

标签： javascript image position detection

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

移动图像本身是我在这里没有解决的另一个问题，但我认为这应该会给你一个坚实的开始。

【讨论】：