1

画像を強調するマウスオーバー効果があり、マウスアウト時に画像を元のサイズに戻します。

$("div.elby_product_thumb img").mouseover(function() {
    var originalHeight = $(this).width();
    var originalWidth = $(this).height();

    $(this).css('border','2px solid #f2f2f2');
    $(this).css('z-index','500');
    $(this).stop().animate({
        "top": "-50px",
        "left": "-50px",
        "width": "200px",
        "height": "200px"
    }, 200);
}).mouseout(function(){
    $(this).css('border','none');
    $(this).css('z-index','1');
    $(this).stop().animate({
        "top": "0px",
        "left": "0px",
        "width": originalWidth + "px",
        "height": originalHeight + "px"
    }, 200);
});

これは、mouseout ハンドラー関数の範囲外であるUncaught ReferenceError: originalWidth is not definedためです。originalWidth/Height

何か案は？

4

3 に答える 3

3

mouseoverandの外で変数を宣言しmouseoutてグローバルにし、内で値を割り当てますmouseover

var originalHeight;
var originalWidth;   

$("div.elby_product_thumb img").mouseover(function(){
      originalHeight = $(this).width();
      originalWidth = $(this).height();
     $(this).css('border','2px solid #f2f2f2');
        $(this).css('z-index','500');
        $(this).stop().animate({
            "top": "-50px",
            "left": "-50px",
            "width": "200px",
            "height": "200px"
            }, 200);
}).mouseout(function(){
        $(this).css('border','none');
        $(this).css('z-index','1');
        $(this).stop().animate({
            "top": "0px",
            "left": "0px",
            "width": originalWidth + "px",
            "height": originalHeight + "px"
        }, 200);
});

編集:ウィンドウスコープで変数を宣言して完全にグローバルにする必要がない場合は、@roasted が提案したように、両方のイベントを囲みます。

(function(){
   var originalHeight;
   var originalWidth;   

   $("div.elby_product_thumb img").mouseover(function(){
    //your code
   }).mouseout(function(){
    //your code
   });
})();
于 2013-01-17T09:23:21.503 に答える
2

まず、dataパラメータを使用して元のサイズを保存できます。次に、次のように、セレクターをキャッシュして呼び出し回数を減らすことができます。

$("div.elby_product_thumb img").mouseover(function() {
    var $el = $(this);
    $el
        .data('originalHeight', $el.height())
        .data('originalWidth', $el.width())
        .css({
            'border': '2px solid #f2f2f2',
            'z-index': '500'
        })
        .stop().animate({
            "top": "-50px",
            "left": "-50px",
            "width": "200px",
            "height": "200px"
        }, 200);
}).mouseout(function() {
    var $el = $(this);
    $el
        .css({
            'border': 'none',
            'z-index': '1'
        })
        .stop().animate({
            "top": "0px",
            "left": "0px",
            "width": $(el).data('originalWidth') + "px",
            "height": $(el).data('originalHeight') + "px"
        }, 200);
});
于 2013-01-17T09:27:18.597 に答える
0

この2つの変数「originalHeight」、「originalWidth」は、マウスオーバー機能の外で簡単に定義できると思います。次に、この 2 つのイベントのグローバルとして、単に「mouseover」と「mouseout」で使用できます。

于 2013-01-17T09:28:02.197 に答える