0

我有简单的图像预览hover。

jQuery

jQuery('img').hover(
    function(){
        jQuery('body').append('<div id="image_preview"><img src="'+ jQuery(this).attr('src') +'" alt="Image preview" /></div>');
        jQuery('.camera_info img').mousemove(
            function(event){
                jQuery('#image_preview').css('top', (event.pageY - 10) + 'px').css('left', (event.pageX + 30) + 'px').fadeIn('normal');
            }
        );
    },
    function(){
        jQuery('#image_preview').remove();
    }
);

CSS：

#image_preview {
    border: 1px solid #CCCCCC;
    display: none;
    padding: 5px;
    position: absolute;
}

问题是，如果图像太靠近浏览器的一侧，它会显示在它之后，如下所示： 图片

我试图在正确的位置上玩，但没有运气......有人可以帮我解决这个问题吗？

4

1 回答 1

1

这是我用来将元素的顶部和底部保持在浏览器的可视区域内的东西——在我的例子中，我不必担心处理元素的左/右坐标，但是可以调整下面的代码来处理那也是。

该函数将 HTMLElement 作为参数，即 or 的返回值，$('#someid').get(0)并document.getElementById('someid') 始终使用 jQuery。

function moveIntoView (elem)
{
    var w$ = $(window),
      elem$ = $(elem),
      docViewTop = w$.scrollTop(),
      docViewBottom = docViewTop + w$.height(),
      elTop = elem$.offset().top,
      elBottom = elTop + elem$.height();
    //  element top is lower than top of document in view
    //  and element bottom is higher than bottom of document in view, so nothing to do
    if( ((docViewTop <= elTop) && (docViewBottom >= elBottom)))
       return;

    elem$.css("top", parseInt(elem$.css("top")) - (elBottom - docViewBottom));
}
于 2013-01-22T15:28:31.170 回答