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

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

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

希望有帮助:)

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

1 个答案: