1

ホバー時にプレビュー画像ポップアップを表示する画像ギャラリーを作成しました。

http://jsfiddle.net/WSfka/

サムネイル画像にカーソルを合わせると、大きな画像のプレビューが表示されます。

サムネイル画像を移動する間にプレビュー画像が点滅する方法に満足していません。スクリプトを簡略化し、プレビュー画像のポップアップを改善するにはどうすればよいですか？

$(document).ready(function() {
    $('.imageGalleryAlbum li a img').mouseenter(function() {
        $(this).closest('li').find('.preview').delay(500).fadeIn(1);
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
    $('.imageGalleryAlbum li .preview').hover(function() {
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
    $('.imageGalleryAlbum li .preview').mouseleave(function() {
        $(this).closest('li').find('.preview').fadeOut(1);
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
    $('.imageGalleryAlbum li .preview').click(function() {
        $(this).closest('li').find('.preview').fadeOut(1);
        $(this).closest('li').siblings().find('.preview').fadeOut(1);
        return;
    });
});

$(document).mouseup(function(e) {
    var container = $(".preview");
    if (container.has(e.target).length === 0) {
        container.fadeOut(1);
    }
});​
4

2 に答える 2

2

3番目の更新

これを試して

フィドルを更新しました

var x;  

$(document).ready(function() {

        $('.imageGalleryAlbum li a img').on('mouseenter', function() {

            $('.preview').stop().hide();

            x = $(this).closest('li').find('.preview');

            if( $(x).is(':visible') ) {
                $(x).show();
            } else {
                $('.preview').hide();
                $(this).closest('li').find('.preview').stop().delay(500).fadeIn(0);
            }
        });


        $('.preview').parent().on('click mouseleave', function() {
            $('.preview').hide();
        });

    });

    $(document).mouseup(function(e) {
        var container = $(".preview");
        if (container.has(e.target).length === 0) {
            container.fadeOut(1);
        }
    });
于 2012-11-05T04:58:46.663 に答える
0

この例を試すことができます。

http://nemanjamilosavljevic.com/javascript/gallery_view/ これは私が作成したギャラリーであり、必要な処理を実行します。また、ユーザーがマウスを動かしても、大きな画像を開いたままにすることができます。

このアプローチがお役に立てば幸いです。または、例全体を使用できることを願っています。

乾杯 ;）

于 2013-02-04T12:03:24.120 に答える