Question

因此，我试图制作一个简单的照片库，当您单击它们时会放大，然后在您再次单击它们时返回较小的尺寸。我有放大部分工作，但到目前为止，我只能通过使用JQuery使用“.mouseout”来缩小图片，这不是我想要的。此外，我希望图像在放大时放在所有其他图像/ div的顶部，现在它被左侧或右侧的任何其他图像覆盖。这是我的代码，底部是一个jsfiddle链接

HTML

<div id="Gpic1">
    <img id='table' src='http://i.imgur.com/7ESpNI8.jpg'>
</div>

CSS

#Gpic1 {
    width: 280px;
    height: 187px;
    display: block;
    background: black;
}
#table {
    width: 280px;
    height: 187px;
}

JQuery的

$('#Gpic1').hover(function () {
    $(this).find('img').fadeTo(500, 0.5);
}, function () {
    $(this).find('img').fadeTo(500, 1);
});

$('#table').click(function () {
    $('#Gpic1').find('img').fadeTo(0, 1);
    $("#table").stop().animate({
        width: 800,
        height: 533
    }, 200); //Bigger
}).mouseout(function () {
    $("#table").stop().animate({
        width: 280,
        height: 187
    }, 200); //Smaller
});

http://jsfiddle.net/kmx6C/

由于

Answer 1

您可以向要放大的元素添加类enlarged，然后检查图像当前是否放大。

    if($('#table').hasClass('enlarged')){
        $('#table').removeClass('enlarged');
        $("#table").stop().animate({width: 280, height: 187}, 200 );
    }else{
        $('#table').addClass('enlarged')
        $("#table").stop().animate({width: 800, height: 533}, 200 );
    }

小提琴：http://jsfiddle.net/4LUYM/

Answer 2

如果图像展开或正常，您需要跟踪：

请在此处查看：http://jsfiddle.net/kmx6C/4/

if ($(e.target).hasClass('expanded')) {
    $("#table").removeClass('expanded').stop().animate({
        width: 280,
        height: 187
    }, 200);
} else {
    $('#Gpic1').find('img').fadeTo(0, 1);
    $("#table").addClass('expanded').stop().animate({
        width: 800,
        height: 533
    }, 200);
}

如果您仍然要使用mouseout事件，那么您需要确保在那里删除该课程：

$("#table").removeClass('expanded').stop().animate({
    width: 280,
    height: 187
}, 200);

至于制作是“坐”其他图像的顶部，您需要确保相应地设置“z-index”和“position”。

单击时调整图像大小

2 个答案: