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() {
    $('#files img.success').attr("src", $(this).attr("src"));
});

你需要弄明白该怎么做.mouseleave（）

Answer 2

您需要从图库容器中克隆实际图像，只需复制图像源不会强制浏览器重新渲染。

编辑：根据您在评论中描述的内容，我认为这应该适合您

$('#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>

如果你有一个命名约定或其他方法来确定新图像的网址而不添加属性，你可以改为使用。

使用prependTo显示缩略图的全尺寸图像

2 个答案: