即使我靠近容器div或浏览器的边缘，如何正确显示缩略图的放大版本？

I have a div full of 60x60 images arranged in rows of 5. I want to show an enlarged version (at 300x300 max) of each thumbnail when you hover each image. I have a surrounding div that hides overflow, so if you hover over an image at one of the corners, the enlarged image will get cut off, so I need to flip the image to the other side. The code I have currently fails at addressing this clipping problem. Any ideas how to properly implement this, or are there any packaged solutions out there (preferably using jQuery)?

我有一个完整的60x60图像排列成5行。我想在你悬停每个图像时显示每个缩略图的放大版本(最大300x300)。我有一个隐藏溢出的周围div,所以如果你将鼠标悬停在其中一个角落的图像上,放大的图像将会被切掉,所以我需要将图像翻转到另一边。我目前无法解决此剪辑问题的代码。任何想法如何正确实现这一点,或有任何打包解决方案(最好使用jQuery)?

  $('a.thumb img').live('mouseover', showThumbnail);
  $('a.thumb img').live('mouseout', function() { $('#image-thumbnail').hide(); });
  $('#images a.thumb').live('click', function() { return false; }); /* disable clicks */

  function showThumbnail() {
    var pos = { left: this.offsetLeft, top: this.offsetTop }
    var css = { }

    css['left'] = pos.left + 60 + 5;
    if (css['left'] + 300 > this.offsetParent.offsetWidth)
    {
      css['right'] = pos.left - 5 + 'px';
      delete css['left'];
    } else {
      css['left'] += 'px';
    }

    css['top'] = pos.top + 60 + 5;
    if (css['top'] + 300 > this.offsetParent.offsetHeight+50)
    {
      css['bottom'] = pos.top - 5 + 'px';
      delete css['top'];
    } else {
      css['top'] += 'px';
    }

    $('#image-thumbnail').css(css);

    $('#image-thumbnail').html("<img style='max-width: 300px; max-height: 300px;' src='" + $(this).parent()[0].href + "' />").show();  
  }

2 个解决方案

#1

I'm using the following to display tooltips over a chart generated by Flot, it has edge detection logic for the window...

我正在使用以下内容在Flot生成的图表上显示工具提示,它具有窗口的边缘检测逻辑...

function showTooltip(x, y, contents){
    $('<div id="tooltip">' + contents + '</div>').appendTo('body');

    var wx=$(window).width();
    var wy=$(window).height();

    var ox=$('#tooltip').width();
    var oy=$('#tooltip').height();

    var t, l, b, a;

    b=x-40; a=wx-x-40;
    if(b<ox && ox>a) l=20;
    else if(ox<a) l=x+20;
    else l=x-ox-20;

    b=y-40; a=wy-y-40;
    if(b<a) t=y+20;
    else t=y-oy-20;

    $('#tooltip').css({top:t,left:l,opacity:0.80}).fadeIn(200);
}

#2

Pop it up in a separate div that is absolutely positioned, with a higher z-index, and outside of the div that has the clipping. I generally use something like

将它弹出一个单独的div,它是一个绝对定位的,具有更高的z-index,并且在具有剪辑的div之外。我通常使用类似的东西

$('#largerImageDiv').html('<img src="path for my larger image" />');
$('#largerImageDiv').show();

then on mouse out

然后鼠标出来

$('#largerImageDiv').hide();

In the larger image div, you assign a style that makes it absolutely positioned, preferably in another portion of the page that they wouldn't be using at the same time as your thumbnail area. You set a z-index that is higher than any other div in that spot.

在较大的图像div中,您可以指定一个使其绝对定位的样式,最好是在页面的另一部分中,它们不会与缩略图区域同时使用。您设置的z-index高于该点中的任何其他div。

#1