2

これに似たズーム効果のある画像ギャラリーを作りたいです。マウスを画像の上に置くと、追加のマークアップを含む画像の拡大版が表示されます。

マークアップ:

<div class="gallery">
    <div class="gallery-item">
        <img src="image.png" width="150" alt="" />
        <div class="gallery-item-full">
            <img src="image.png" width="250" alt="" />
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit</p>
        </div>
    </div>
    .
    .
    .
</div>

CSS:

.gallery {
    margin: 100px auto;
    width: 600px;
}

.gallery-item {
    float: left;
    position: relative;
    margin: 0 25px;
    width: 150px;
}

.gallery-item-full {
    z-index: 999;
    position: absolute;
    background: #fff;
    border: #ccc 1px solid;
    padding: 5px;
    top: -50px;
    left: -50px;
    opacity: 0;
}

.gallery-item:hover .gallery-item-full {
    opacity: 1;
}

これは機能しますが、前のギャラリーのようにスムーズな移行が必要です。私は Javascript/jQuery を自由に使用できます。

ありがとう。

4

1 に答える 1

4

これを試してください: http://jsfiddle.net/FPKAP/12/ (少し違いますが、最近誰かのために作成しました)

それがあなたのニーズに合うことを願っています:)

リンク: Jquery を使用してマウスオーバーすると画像が拡大されますか?

コード

$('#zoomimg').mouseenter(function() {
    $(this).css("cursor","pointer");
    $(this).animate({width: "50%", height: "50%"}, 'slow');
});

$('#zoomimg').mouseleave(function() {   
    $(this).animate({width: "28%"}, 'slow');
});

コード

$('#zoomimg').hover(function() {
    $(this).css("cursor", "pointer").animate({
        width: "50%",
        height: "50%"
    }, 'slow');

}, function() {
    $(this).animate({
        width: "28%"
    }, 'slow');

});​
于 2012-08-06T04:18:38.777 に答える