Question

我正在尝试显示缩放的缩略图，以便在容器div悬停时显示完整图像。

我遇到的问题是，当其中一个动画时，它会推动它周围的元素。我尝试了绝对定位，但这使得所有元素都移动了 - 我希望它们保持原位，但是动画元素可以覆盖它周围的元素。我也试过z-index，但它也没用。下面是HTML，CSS，jQuery和链接供您参考。

HTML：

<div style="width:400px;height:400px;background:red;">
    <div class="imgThumb"><img src='templates/temp1/thumbnail.jpg' border='0'></div>
    <div class="imgThumb"><img src='templates/temp1/thumbnail.jpg' border='0'></div
    <div class="imgThumb"><img src='templates/temp1/thumbnail.jpg' border='0'></div
</div>

CSS：

.imgThumb{
    float: left;
    margin: 5px;
    width: 150px;
    height: 150px;
    overflow: hidden;
    border: 1px solid black;
    z-index: 100;
}

打开并关闭jQuery：

$("div.imgThumb").mouseover(function () {
        var imgWidth = $(this).find("img").width();
        var imgHeight = $(this).find("img").height();
        $(this).animate({
            height: imgHeight,
            width: imgWidth,
            position: "absolute",
            zIndex: 999,
        });
    });
    $("div.imgThumb").mouseout(function () {
        $(this).stop(true).animate({
            height: "150",
            width: "150",
            position: "relative"
        });
    });

谢谢！

Answer 1

这是一个可能的解决方案，包括克隆thunmbnail并在其余元素之上为克隆设置动画

http://jsbin.com/edenu3/edit

$(function() {
  $(".thumb").bind("mouseover", function() {
    var extraImg = $(this).clone();
    var of = $(this).offset();
    extraImg.css({position:'absolute', top: of.top, left: of.left, margin: 0})
      .appendTo("body")
      .animate({
        width:200,
        height:200
      });

    extraImg.bind("mouseout", function() {
      $(this).stop(true).remove();
    });
  });
});

Answer 2

如果您可以添加另一组属性，我们可以解决它。

.imgThumb {
    border: 1px solid black;
    float: left;
    height: 150px;
    margin: 5px;
    overflow: hidden;
    position: absolute;
    width: 150px;
    z-index: 100;
}

.imgThumb1 {
}

.imgThumb2 {
    left: 170px;
}

.imgThumb3 {
    top: 170px;
}

将类imgThumb1，imgThumb2和imgThumb3添加到imgThumb div。然后在动画上将z-index更改为9999。

jsfiddle

中的工作副本

jQuery div对周围元素进行动画处理

2 个答案: