圖像彈出（DIV）的jQuery，加載大圖像點播

我試過幾十個圖像縮放jQuery插件，但不希望所有花式加載效果，因爲我想要顯示數百個縮略圖頁面（其中，每個用於圖像縮放的jQuery插件都需要加載大圖像或在頁面上加載大圖像），這需要2-3分鐘才能加載所有底層大圖像。我需要的僅僅是一個簡單腳本的例子，當鼠標懸停在縮略圖上時，一個彈出窗口（DIV標籤，即它）顯示大圖像（已加載ON-DEMAND）。當鼠標離開大圖像時，它會消失/關閉。圖像彈出（DIV）的jQuery，加載大圖像點播

website showing example of exactly what I'm trying to do

上面基本上該網站鏈接顯示正是我想要做什麼（例子中沒有使用jQuery，但在一些臃腫的第三方控制）。

我的計劃是讓網格顯示多達數百個縮略圖，因此按需是絕對必要的 - 不需要花哨的動畫。

我打算使用最新版本的jQuery的UI

我會如何去嗎？有沒有針對jQuery的按需圖像彈出式插件？

來源

2014-01-15 MC9000

您可以在jQuery中使用懸停事件。在鼠標移入時創建一個div來加載大圖，並在鼠標移出時破壞div。下面是一個簡單的例子（smallImage將有一個「bigImageSrc」屬性來保存大圖像的來源）：

$(".smallImage").hover(function(){ 
    //move in function 
    var bigImage = $("<div></div>").appendTo(".bigDiv"); 
    $("<img></img>").attr("src",$(this).attr("bigImageSrc")).appendTo(bigImage); 
    $(this).data("bigImage",bigImage); 
}, function(){ 
    //move out function 
    var bigImage = $(this).data("bigImage"); 
    bigImage.remove(); 
    $(this).data("bigImage",null); 
});

來源

2014-01-15 04:03:31 qqfish

圖像彈出（DIV）的jQuery，加載大圖像點播

回答

相關問題