如何使用 jquery 在鼠标悬停时将图像向右移动？

Question

$(document).ready(function() {
    $('#tapaintings a img').mouseenter(function() {
        var fileNameForSrc = $(this).attr("src").replace(/^.*[\\\/]/, '');
        $(this).attr("src", "images/" + fileNameForSrc);
    });
    $('#tapaintings a img').mouseleave(function() {
        var fileNameForSrc = $(this).attr("src").replace(/^.*[\\\/]/, '');
        $(this).attr("src", "images/thumbnails/" + fileNameForSrc);
    });
});

以上是我现在使用的jquery代码。它使我在 mouseenter 上放大的任何图像并在 mouseleave 上恢复到正常大小。我想知道如何制作它，以便当我用鼠标输入缩略图时，它会在我的照片库右侧进行动画处理。我也担心使用替换方法，因为我相信如果我将放大的图像向右移动，该功能会自动识别我的鼠标已经离开图像并恢复到图像的较小版本。通过使用替换方法，我的缩略图在较大图像下方并且不可见，或者实际上正如方法名称所暗示的那样，被替换了？

这是我的html：

<table id="tapaintings">
            <tr>
                <td><a id="painting1" href="images/painting1.jpg" rel="shadowbox[paintings]" title="painting1"> <img src="images/thumbnails/painting1.jpg" alt="painting"></a></td>
                <td><a id="painting2" href="images/painting2.jpg" rel="shadowbox[paintings]" title="painting2"> <img src="images/thumbnails/painting2.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="painting3" href="images/painting3.jpg" rel="shadowbox[paintings]" title="painting3"> <img src="images/thumbnails/painting3.jpg" alt="painting"></a></td>
                <td><a id="painting4" href="images/painting4.jpg" rel="shadowbox[paintings]" title="painting4"> <img src="images/thumbnails/painting4.jpg" alt="painting"></a></td>
            </tr>
            <tr>
                <td><a id="painting5" href="images/painting5.jpg" rel="shadowbox[paintings]" title="painting5"> <img src="images/thumbnails/painting5.jpg" alt="painting"></a></td>
                <td><a id="painting6" href="images/painting6.jpg" rel="shadowbox[paintings]" title="painting6"> <img src="images/thumbnails/painting6.jpg" alt="painting"></a></td>
            </tr>
        </table>

Answer 1

关于将鼠标悬停的图像设置为向右移动的动画，您的 HTML 结构可能会遇到一些问题。表格元素旨在将内容保存在整齐的列/行中，即其中项目的顺序是有意义的。对于这样的动画来说，这并不是一个很好的元素，但是如果您需要将图像向右移动，我将使用周围元素的 margin 属性将图像向右移动（通过逐渐应用左边距a 元素）。一般来说，我认为最好为这样的事情放弃表格结构，转而使用相对定位的 div，其中包含绝对定位的所有图像元素。这将使您对动画元素进行最清晰的控制。

至于替换功能，这是用于文本操作，实际上对图像源没有任何作用。当您使用 $().attr() 函数时，您在上面的代码中设置图像源，replace 所做的是将 src 字符串更改为您指定的格式。只要您更改了该图像元素的源（使用 $.attr() fn），缩略图就会从文档的 HTML 结构中删除（但仍保留在内存中缓存）并加载完整大小的版本。当您将图像元素上的源重置回缩略图版本时，图像的完整尺寸版本也会发生同样的情况。

希望对你有帮助:)