3

画像のグリッドがあります。マウスを特定の画像の上に置くと、その画像の大きいバージョンがオーバーレイになり、元のグリッド画像のバージョンが少し大きくなります。

マウスオーバーはうまく機能します。ただし、mouseoutとmouseleaveはどちらも、大きな画像を即座にフェードアウトさせます。マウスが終わっているかどうか。

        function imageSize(img){
              var theImage = new Image();
              $(theImage).load(function() {
                var imgwidth = this.width;
                var imgheight = this.height;
                var position = img.parent().position()
                var index = img.parent().index();


                ///calculate top
                var top     = (position.top -((imgheight-img.height())/2));
                var left    = (position.left -((imgwidth-img.width())/2));


                /// place image in img_pop
                var clone;
                clone = '<div class="pop_img clone'+index+'"></div>';
                $(clone).insertAfter($('BODY'));


                $('.pop_img.clone'+index+'').css({
                    'width'                 :   img.width(),
                    'height'                :   img.height(),
                    'top'                   :   position.top,
                    'left'                  :   position.left,
                    'backgroundImage'       :   'url('+theImage.src+')',
                });

                    $('.pop_img.clone'+index+'').stop().animate({
                        'height'    :   imgheight,
                        'top'       :   top,
                        'width'     :   imgwidth,
                        'left'      :   left,
                    },300,'easeInOutQuad');

              });
              theImage.src = img.attr('src');
            }

            $('.am-wrapper img').live('mouseenter',function(){
                imageSize($(this));
            });

            $('.am-wrapper img').live('mouseleave',function(){
                thisIndex = $(this).parent().index();
                $('.pop_img.clone'+thisIndex+'').fadeOut('200');
            });

理想的には、マウスがそれぞれのグリッド画像の上にある間、オーバーレイ画像を表示したままにしておく必要があります。ユーザーが別のグリッド画像のマウスを置くと、古いオーバーレイがフェードアウトします。

4

1 に答える 1

2

問題は、オーバーレイがポップアップすると、基になる要素からのマウスイベントがブロックされることです。基本的に、その下にあるものからマウスイベントを盗みます。したがって、mouseout下の要素でイベントが発生します。

下にある要素に対してマウスの位置でトリガーするのは少し注意が必要です。mousemoveマウスが元のdivの境界を離れるかどうかを確認するイベントを作成する必要がある場合があります。

わずかに異なる機能を使用できる場合はmouseout、オーバーレイ画像でをトリガーできます。

mouseenterこれは、別のグリッド要素（オーバーレイの下にない）を使用したときに他のオーバーレイを閉じる画像のグリッドと一緒に作成したデモです。

デモ： http： //jsfiddle.net/jtbowden/29U93/

他のいくつかの注意：

  1. なぜ使っているのnew Image()？jQueryの組み込みのクローン機能を使用するだけです。
  2. あなたはやってい$(clone).insertAfter($('BODY'))ます。body合法的に追加することはできません。あなたがする必要がありますappendTo('body')。

編集：

これを行うにはかなり簡単な方法があることに気づきました。

グリッドアイテムと一致するdivを使用して、画像グリッドの上に配置される高いz-indexで透明なグリッドを作成します。これらを使用して、オーバーレイをトリガーしてポップアップします（透明なグリッドの下）。

デモ： http： //jsfiddle.net/jtbowden/S6AvH/1/

このデモでは、透過グリッドを手動で作成し、javascriptを使用して配置しますが、javascriptを使用してすべてを行うことができます。

于 2012-04-11T23:09:51.097 に答える