Question

我有一个带有一堆图像缩略图的标记，每个缩略图都放在自己的标记中。

<div class='imageframe'>
    <div class='imagecontainer'>
        <img class='clipartimage' src='myimageurl>
    </div>
    <div class='imagecontainer'>
        <img class='clipartimage' src='myimageurl2>
    </div>
</div>

到目前为止我的JQuery代码：

$(".imagecontainer").click(function (event) {
    $(event.target).width(100);
    $(event.target).height(100);
});

我想做的是，当用户点击或悬停在图片上时，会显示较大版本的图片。到目前为止，我可以在单击图像时将图像的宽度和高度加倍，但这只会使图像“溢出”到它的相邻图像中，并且部分位于这些图像后面。由于图片背景是透明的，因此情况更糟。

我需要的是让图片在点击（或悬停）时移动到前景，并删除其背景的透明度。

除非做这样的事情真的很重要，否则我宁愿自己编写代码。

由于

Answer 1

您可以在悬停时或您喜欢的时间将z-index设置为1000

$(event.target).css("z-index","1000");

如果有正确的想法，我猜这会是这样的：）

$(".clipartimage").on('click',function () {
    $(this).width(100);
    $(this).height(100);
    $(this).css("z-index","1000");
});

我为您保留了旧图像尺寸的悬停功能

// Vars to get old size back
var oldH = 0;
var oldW = 0;
$(".imagecontainer").hover(function () {
    // Function for Hover Element
    oldH = $('.clipartimage',this).height();
    oldW = $('.clipartimage',this).width();
    $('.clipartimage',this).width(300);
    $('.clipartimage',this).height(200);
    $('.clipartimage',this).css( 'z-index', 1000 );

}, function(){
    // Function for hover out
    $('.clipartimage',this).width(oldW);
    $('.clipartimage',this).height(oldH);
    $('.clipartimage',this).css( 'z-index', 0 );
});

这是一个演示 http://jsfiddle.net/rfCkD/

SLIM VERSION会像

// Vars to get old size back
var oldH = 0;
var oldW = 0;
$(".imagecontainer").hover(function () {
    // Function for Hover Element
    oldH = $('.clipartimage',this).height();
    oldW = $('.clipartimage',this).width();
    $('.clipartimage',this).width(300).height(200).css( 'z-index', 1000 );
}, function(){
    // Function for hover out
    $('.clipartimage',this).width(oldW).height(oldH).css( 'z-index', 0 );
});

重要：在你的情况下，你说你的imagecontainer有：

.imagecontainer { float:left; }

因此，如果您希望图片收听z-index，那么您的图片需要：

.clipartimage { position:relative; }

你也可以在容器上使用position：relative ... 我希望这就是你要找的东西:)否则，如果你想让图像为观看空间，你可以寻找动画。

Answer 2

好的，有几处变化，但请告诉我这是否符合您的要求。

http://jsfiddle.net/wrxsti85/GqwbY/

var $target;
var targetWidth;
var targetHeight;
var targetPos;
var isAnimated;
$(".imagecontainer").hover(function(){
    $target = $('.clipartimage', this);
    if(!isAnimated){        
        targetPos = $target.position();
        targetWidth = $target.width();
        targetHeight = $target.height();
        isAnimated = true;
    }
    $target.stop().animate({'height':'200px', 'width':'200px', 'left': '-=' + (targetWidth / 2), 'top': '-=' + (targetHeight / 2) }, 200).css({
        'background': '#fff',
        'border':'solid 1px #000',
        'border-radius': '5px',
        'box-shadow': '0px 6px 10px rgba(0,0,0,.8)',
        'z-index': '2'
    });
}, function(){
    $target.stop().animate({'height':targetWidth, 'width':targetHeight, 'left': targetPos.left, 'top': targetPos.top }, 200, function(){ isAnimated = false; }).css({
        'background': 'transparent',
        'border':'solid 0px #000',
        'border-radius': '0px',
        'box-shadow': '0px 0px 0px rgba(0,0,0,.8)',
        'z-index': '1'
    });
});

我认为没有border / bg，它实际上看起来更好一点，但它取决于你。希望这有帮助！

编辑：尝试使其尽可能动态。显然，您可以根据需要更改样式。希望这适合你。祝你好运！

jQuery图像缩放前景

2 个答案: