Question

我有鼠标悬停效果可以增强图像，并在鼠标移动时将图像缩放回原始大小。

$("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处理函数的范围内。

有什么想法吗？

Answer 1

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

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

Answer 3

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

获取范围外的图像宽度/高度

3 个答案: