0

因此，我正在尝试制作一个简单的照片库，当您单击它们时会放大，然后在您再次单击它们时返回它们的较小尺寸。我有放大的部分，但到目前为止，我只能通过使用带有 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/

谢谢

4

2 回答 2

2

您可以为要放大的元素添加一个类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/

于 2013-10-25T23:06:18.707 回答
1

您需要跟踪图像是展开还是正常：

在这里看到它：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 ”。

于 2013-10-25T23:10:47.347 回答