0

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

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

我怎样才能做到这一点？

4

1 回答 1

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

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

于 2010-02-04T23:12:15.033 回答