使用prependTo顯示縮略圖的完整大小圖像

Question

我使用prependTo在我的網站的默認圖像：

$('<li></li>').prependTo('#files') 
       .html('<img src="/media/sample1.jpeg" alt="" /><br />') 
       .addClass('success'); 

以上默認的圖像是3頁的縮略圖，被寫爲：

<div id="gallery"> 
    <ul> 
     <li> 
      <a href="/media/glasses1.png" title="styling yourself w/ this armani pair"> 
       <img src="/media/glasses1.png" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="/media/glasses0.png" title="styling yourself w/ this guess pair"> 
       <img src="/media/glasses0.png" width="72" height="72" alt="" /> 
      </a> 
     </li> 
     <li> 
      <a href="/media/glasses2.png" title="styling yourself w/ this guess pair"> 
       <img src="/media/glasses2.png" width="72" height="72" alt="" /> 
      </a> 
     </li> 
    </ul> 
</div> 

如何檢測縮略圖，使鼠標懸停我可以用縮略圖的全尺寸圖像替換默認圖像嗎？

Answer 1

您需要從庫容器克隆的實際圖像，僅僅複製圖像源不會強制瀏覽器重新提交。

編輯：從你在你的評論形容我認爲這應該爲你工作

$('#gallery img').mouseenter(function() { 
    var img = $('<img alt=""/>').attr('src', $(this).data('other')); 
    $('#files img').replaceWith(img); 
}); 

並在您的縮略圖添加數據，其他屬性：

<a href="/media/glasses1.png" title="styling yourself w/ this armani pair"> 
    <img src="/media/glasses1.png" data-other="replacementImage.png" width="72" height="72" alt="" /> 
</a> 

如果你有一個命名約定或其他一些方式來確定新圖像的url而不添加屬性，你可以這樣做。

Answer 2

類似：

$('#gallery img').mouseenter(function() { 
    $('#files img.success').attr("src", $(this).attr("src")); 
}); 

你需要弄清楚如何在.mouseleave做（）