0

我发现这个脚本可以在悬停时更改图像。 

$(document).ready(function() {
$('.rollover').hover(function() {
    swapImage(this);
}, function() {
    swapImage(this); 
    });
 });

function swapImage(image) {
    var current = $(image).attr('src');
    $(image).attr('src', $(image).attr('hover'));
    $(image).attr('hover', current);

 }

但现在我遇到了问题，我想要一个平稳/柔和的过境，而不是它现在所做的。在这里你可以找到一个小提琴：JSfiddle

谢谢，一个愉快的星期天！

4

1 回答 1

1

对我来说交换非常顺利。您的交换方法可能很大程度上取决于用户计算机的浏览器、操作系统和硬件规格，因为您在src通过 JS 更改图像方面做了大量工作。

虽然浏览器通常足够智能，可以缓存先前加载的图像并且易于访问，但您的方法在第一次转换时并不总是顺利，因为浏览器在您更改之前不知道新图像src，此时浏览器启动下载图像。不幸的是，此时您还尝试显示图像，因此在显示图像但未实际加载时会出现一些断开连接。

一种更简单的方法是将两个图像都加载到页面上（所以有两个<img>标签），然后隐藏一个。然后在翻转时，交换哪个隐藏，哪个显示，并在不悬停时交换回来。这种交换效果可以纯粹用 CSS 来实现，会比 JS 快。它还将在用户交互之前预加载隐藏图像，因为第二张图像已经在页面上，因此您可以立即开始更平滑地过渡到隐藏图像。

我用下面的代码修改了你的小提琴。我添加了一个类<a>，并添加了第二个<img>而不是使用hoverattr。一些 HTML 注释：是（或任何其他元素）hover上的无效属性。<img>如果有的话，您应该改用data-hover它，它遵循标准的 HTML5data-*自定义属性规范，但我们在这个 CSS 解决方案中不需要它。此外，您的小提琴中缺少一个结束</div>标签。

HTML：

<div class="col-1">
    <a class="rollover-container" rel="img_gal" href="gal/m.jpg">
        <img class="rollover"  src="http://schanzenstrasse.de/gal/c1_sw.jpg"/>
        <img class="rollover-swap" src="http://schanzenstrasse.de/gal/c1.jpg"/>
    </a>
</div>

CSS：

.rollover-swap {
    display: none; /*Hide the rollover image*/
}

.rollover-container:hover .rollover {
    display: none; /*If we hover over the <a>, then hide the normal image*/
}

.rollover-container:hover .rollover-swap {
    display: inline; /*If we hover over the <a>, then show the rollover image*/
}

JS：

没有任何！

于 2013-11-10T15:09:04.257 回答