jQuery在mouseover上成長圖像

我有一堆畫廊圖像，我顯示爲小縮略圖（約50px大）。當用戶將小圖像放置在一個較大的圖像上時，會有一個「增長」出來（最大100px），這樣他們可以看到它更好一些。jQuery在mouseover上成長圖像

我已經得到了這段代碼，它可以計算出圖像在頁面上的位置，在上面應用另一個圖像（絕對位置），然後將其增大。

$(document).on("mouseover", "img.grow", function() { 
    var iid = $(this).attr("id"); 
    var isr = $(this).attr("src"); 
    var loc = $(this).offset(); 
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />'); 
    $(".grown").animate({ 
     width: '100px', 
     marginLeft: '-25', 
     marginTop: '-15' 
    }, 250); 
}).on("mouseleave", "img.grow", function() { 
    var iid = $(this).attr("id"); 
    $("img#o" + iid).fadeOut(100, function() { 
     $(this).remove(); 
    }); 
});

我得到了可怕的「反彈」，但 - 作爲新圖像被放置在原來的頂部，它會導致「鼠標離開」開火。很明顯，我不希望發生這種情況，但我需要使用絕對定位的圖像來阻止佈局晃來晃去。

任何想法？

來源

2012-04-26 Grim...

是的，是我做的。來源！ – 2012-04-26 19:14:22

原來，最簡單的答案是將mouseleave應用於所創建的圖像，而不是下面的圖像。最終代碼：

$(document).on("mouseover", "img.grow", function() { 
    var iid = $(this).attr("id"); 
    var isr = $(this).attr("src"); 
    var loc = $(this).offset(); 
    $("body").append('<img class="grown" id="o' + iid + '" src="' + isr + '" style="position: fixed; z-index: 1505; top: ' + loc.top + 'px; left: ' + loc.left + 'px; width: 33px;" />'); 
    $(".grown").animate({ 
     width: '100px', 
     marginLeft: '-25', 
     marginTop: '-15' 
    }, 250); 
}).on("mouseleave", "img.grow", function() { 
    var iid = $(this).attr("id"); 
    $("img#o" + iid).fadeOut(100, function() { 
     $(this).remove(); 
    }); 
});

的jsfiddle：http://jsfiddle.net/Grimdotdotdot/FLB8E/

來源

2012-04-26 19:41:48

我覺得你正在走錯這條路，太亂了。如何：

你想長到
全尺寸創建一個容器應用圖像作爲BACKGROUND-IMAGE與x,y位置center,center
此圖片是全尺寸之一，但最初你設置BACKGROUND-SIZE說60％
在懸停動畫這個屬性

或者一些類似的過程。

來源

2012-04-26 16:40:22

那不就是說每個容器都佔據了整個圖像的寬度，而一個坐在中間的小容器呢？ – 2012-04-26 16:45:36

njeeeeeh'background-size' crossbrowser兼容性。 – 2012-04-26 16:51:14

jQuery在mouseover上成長圖像

回答

相關問題