使用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做（）