0

小さなサムネイル（約50ピクセルの大きさ）として表示するギャラリー画像がたくさんあります。ユーザーが小さな画像の上にマウスを置くと、大きな画像が画像から「大きくなり」（最大100ピクセル）、画像が少しよく見えるようになります。

私はこのコードを持っています。これは、画像がページのどこにあるかを調べ、別の画像（絶対位置）を上部に適用してから拡大します。

$(document).on("mouseover", "img.grow", function() {
    var iid = $(this).attr("id");
    var isr = $(this).attr("src");
    var loc = $(this).offset();
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />');
    $(".grown").animate({
        width: '100px', 
        marginLeft: '-25',
        marginTop: '-15'
    }, 250);
}).on("mouseleave", "img.grow", function() {
    var iid = $(this).attr("id");
    $("img#o" + iid).fadeOut(100, function() {
        $(this).remove(); 
    });
});

しかし、恐ろしい「バウンス」が発生しています。新しい画像が元の画像の上に配置されると、「マウスリーブ」が起動します。もちろん、これは望ましくありませんが、レイアウトが揺れるのを防ぐために、絶対位置の画像を使用する必要があります。

何か案は？

4

2 に答える 2

2

最も簡単な答えは、下の画像ではなく、作成された画像にマウスリーブを適用することでした。最終コード：

$(document).on("mouseover", "img.grow", function() {
    var iid = $(this).attr("id");
    var isr = $(this).attr("src");
    var loc = $(this).offset();
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />');
    $(".grown").animate({
        width: '100px', 
        marginLeft: '-25',
        marginTop: '-15'
    }, 250);
}).on("mouseleave", "img.grow", function() {
    var iid = $(this).attr("id");
    $("img#o" + iid).fadeOut(100, function() {
        $(this).remove(); 
    });
});

JSFiddle： http: //jsfiddle.net/Grimdotdotdot/FLB8E/

于 2012-04-26T19:41:48.983 に答える
0

私はあなたがこれを間違った方法で行っていると思います、それはあまりにも厄介です。どうですか：

  • 成長させたいフルサイズのコンテナを作成します

  • の位置で画像を適用しBACKGROUND-IMAGEますx,ycenter,center

  • この画像はフルサイズですが、最初はBACKGROUND-SIZE60％に設定します

  • ホバー時にこのプロパティをアニメートします

またはこれに似たプロセス。

于 2012-04-26T16:40:22.207 に答える