即時創建新元素

Question

我有一個img元素。當用戶將鼠標懸停在它上面時，我想在鼠標附近創建一個新的div，並在div中顯示相同的圖像 - 就像預覽一樣。我不想使用現有的插件。有沒有簡單的方法來實現它？

Answer 1

檢查這個博客帖子（第2例）

Image Preview using jQuery

Working example

然後就檢查出CSS和他使用的JS在那個例子中（提示：源代碼）。

無法獲取更容易那麼這

Answer 2

你說你不想重新使用現有的插件 - 我可能會問，爲什麼？

我相信這thumbnail plugin會照顧你的確切位置後護理。實現這個要求的代碼被簡化爲：

<script> 
$("img").thumbPopup({ 
    imgSmallFlag: "_s", 
    imgLargeFlag: "_l" 
}); 
</script> 

Answer 3

我同意你的看法，你真的不需要插件的一切。啥子你要做到的是非常簡單的：

只要有一個絕對定位的div裏面裝有HTML頁面的圖像。給他們spcific IDS，那麼，如果您使用的是完全相同的文件縮略圖和預覽你可以嘗試這樣的：

$('.thumbnails_class').mousemove(function(e) { 
    $('#preview_div').css({top: e.pageY, left: e.pageY}); 
    $('#preview_img').attr('src', $(this).attr('src')); 
}); 

我沒有測試的代碼，但我想這將只是工作精細。如果你沒有使用相同的圖像兩者的縮略圖和預覽，您仍然可以使用類似的技術，只是使用縮略圖的src屬性創建預覽源：

$('.thumbnails_class').mousemove(function(e) { 
    $('#preview_div').css({top: e.pageY, left: e.pageY}); 
    $('#preview_img').attr('src', $(this).attr('src').replace(/thumb/, 'preview')); 
}); 

在這個例子中我用文件名中的預覽替換單詞縮略圖。

最後，你需要顯示/隱藏預覽：

$('.thumbnails_class').mouseover(function() { 
    $('#preview_div').show(); 
}); 

$('.thumbnails_class').mouseout(function() { 
    $('#preview_div').hide(); 
}); 

就是這樣。進行必要的調整，你很好去。