避免滚动条的jQuery图像视口计算算法

Question

我正在创建一个图像悬停效果,但我遇到了问题.当我将鼠标悬停在某些图像上时,会出现我想要避免但不知道如何操作的滚动条.我认为它与视口和计算有关,但我不确定如何做到这一点.

这里的例子

JSBin代码

这是代码:

$('.simplehover').each(function(){
    var $this = $(this);        
    var isrc = $this[0].src, dv = null;

    $this.mouseenter(function(e){
        dv = $('<div />')
            .attr('class', '__shidivbox__')
            .css({
                display: 'none',
                zIndex : 9999,
                position: 'absolute',
                top: e.pageY + 20,
                left: e.pageX + 20
            })
            .html('<img alt="" src="' + isrc + '" />')
            .appendTo(document.body);           
        dv.fadeIn('fast');
    })
    .mouseleave(function(){
        dv.fadeOut('fast');
    });         

});

任何人都可以帮助我如何使它,以便悬停的图像出现在滚动条不出现的地方？(当然,如果图像尺寸非常大,我们无法避免滚动条)

我只想在缩放时显示原始图像,同时尽可能避免使用滚动条.

请注意,我打算将其转换为jQuery插件,因此我无法强制插件的用户overflow设置为hidden.该解决方案具有视口,左侧,顶部,滚动宽度和高度,窗口宽度/高度属性,我可以在以后将其合并到插件中.

---

更新:

我想出了这个:

http://jsbin.com/upuref/14

然而,它非常非常hacky并且不是100%完美.我正在寻找更好的算法/解决方案.我已经看过很多悬停插件,这样做非常好,但由于我不是很擅长这个,我不能完美地做到这一点.例如,Hover Zoom Chrome插件可以根据其大小在适当的位置显示悬停的图像.

Answer 1

嗯，这看起来很有趣。无论如何，这是我的答案。我已经看了几天了，不过我也想参与其中。下面将确保悬停图像不会超出视口，并且如果图像的宽度大于可用的显示空间，则将调整图像的显示大小（您可以注释掉代码如果您不想要它，它会执行此操作。只需在代码中查找单词“resize”）。

var $document = $(document);
$('.simplehover').each(function(){
    var $this = $(this);
    // make sure that element is really an image
    if (! $this.is('img')) return false;

    var isrc = $this[0].src, ibox = null;

    if (! isrc) return false;
    ibox = $('<img />')
            .attr('class', 'simpleimagehover__shidivbox__')
            .css({
                display: 'none',
                zIndex : 99,
                MozBoxShadow: '0 0 1em #000', 
                WebkitBoxShadow: '0 0 1em #000',
                boxShadow: '0 0 1em #000',
                position: 'absolute',
                MozBorderRadius : '10px',
                WebkitBorderRadius : '10px',
                borderRadius : '10px'
            })
            .attr('src', isrc)
            .appendTo(document.body);          

    $this.bind('mouseenter mousemove', function(e) {
        $('.simpleimagehover__shidivbox__').hide();

        var left = e.pageX + 5, 
            top = e.pageY + 5,
            ww = window.innerWidth,
            wh = window.innerHeight,
            w = ibox.width(),
            h = ibox.height(),
            overflowedW = 0,
            overflowedH = 0;

        // calucation to show element avoiding scrollbars as much as possible - not a great method though
        if ((left + w + $document.scrollLeft()) > ww)
        {
            overflowedW = ww - (left + w + $document.scrollLeft());
            if (overflowedW < 0)
            {
               left -= Math.abs(overflowedW);
            }
        }

        // 25 is just a constant I picked arbitrarily to compensate pre-existing scrollbar if the page itself is too long
        left -= 25;
        left = left < $document.scrollLeft() ? $document.scrollLeft() : left;

        // if it's still overflowing because of the size, resize it
        if (left + w > ww)
        {
            overflowedW = left + w - ww;
            ibox.width(w - overflowedW - 25);
        }


        if (top + h > wh + $document.scrollTop())
        {
            overflowedH = top + h - wh - $document.scrollTop();
            if (overflowedH > 0)
            {
                top -= overflowedH;
            }
        }

        top = top < $document.scrollTop() ? $document.scrollTop() : top;
        ibox.css({
            top: top,
            left: left
        });

        ibox.show();
    }); 


    $('.simpleimagehover__shidivbox__').mouseleave(function(){
        $('.simpleimagehover__shidivbox__').hide();
    });

    $document.click(function(e){
        $('.simpleimagehover__shidivbox__').hide();
    });

    $document.mousemove(function(e){
        if (e.target.nodeName.toLowerCase() === 'img') {
            return false;
        }

        $('.simpleimagehover__shidivbox__').hide();
    });
});

虽然我的解决方案本身并不完美，但您可能会在其中找到一些有用的东西来帮助您确定视口。另外，您可能需要考虑代码的性能。由于这是您正在构建的插件，因此您需要在将其公开发布之前进行一些优化。基本上，只要确保速度不慢即可。