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);
});

虽然这导致Uncaught ReferenceError: originalWidth is not defined因为originalWidth/Height不在 mouseout 处理函数的范围内。

有任何想法吗？

4

3 回答 3

3

在外部声明变量mouseover并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

我认为您可以在 mouseover 函数之外简单地定义这两个变量“originalHeight”、“originalWidth”。然后你可以简单地在“mouseover”和“mouseout”中使用它，作为这两个事件的全局。

于 2013-01-17T09:28:02.197 回答