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 に答える