Question

我的网站上有一个GIF，我希望它只在你悬停在它上面时播放，但只播放一次。所以我不希望用户能够再次触发事件，除非他们刷新页面。有谁知道怎么做？

到目前为止我所拥有的是一个静态图像（gif的第一帧），在鼠标悬停时，它变成了一个不循环的gif。如果我再次将鼠标放在它上面，它将重复动画，这是我不想要的。

HTML

<img class="footer" src="images/website footer static.jpg" onmouseover="this.src='images/website footer.gif';"

CSS

.footer {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:10px;
box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75); }

Answer 1

通过将JavaScript移动到函数中并在更改removeAttribute('onmouseover')后添加src，可以轻松完成此操作。由于我没有您的图片，我只使用了Google上出现的前两个图片：

function playGIF(elm) {
    elm.src = 'http://www.image-mapper.com/photos/original/missing.png?1263880893';
    elm.removeAttribute('onmouseover');
}

.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:10px;
    box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}

<img class="footer" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="playGIF(this);" />

JSFiddle：http://jsfiddle.net/mavpx438/

如果你看到开发人员工具中呈现的img的代码，你会发现在将鼠标移到图像上之前，onmouseover属性存在，但是你移动的那一刻通过它，图像发生变化，然后立即删除onmouseover标记的img属性。这样可以防止在后续鼠标悬停时重新加载图像。

我希望这会有所帮助。 ^^

修改

由于您的“回答问题”和我的回复评论似乎已删除，我将在此处添加对此的解释。

您曾询问过仅使用HTML / CSS。虽然我们使用伪:hover进行鼠标悬停效果，但它会将显示恢复到其原始状态，而不会进行更改。更改呈现代码的唯一方法是进行永久性更改，这是您需要执行的操作。通过脚本编写。

这就是语言的运作方式。 HTML5在我们能做的事情上有了很大的改进，但它仍然是一个固定的渲染代码。一旦呈现该代码，您需要更动态地操作。高级HTML5将允许这些方面的一些功能，但我们正在谈论高端开发，它将依赖于JavaScript。也许使用HTML6我们会看到动态渲染，但我对此表示怀疑。

我希望这些附加信息有助于澄清为什么HTML / CSS选项不是一个。

Answer 2

试试这个Fiddle使用jquery在悬停时更改属性，然后在悬停时使用unbind禁用悬停效果

$('.footer').hover(function () {
    $(this).attr("src", "http://www.thiefmissions.com/targa/fan.gif");
   $(this).unbind('mouseenter mouseleave');
});

.footer {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top:10px;
    box-shadow: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img class="footer" src="images/website footer static.jpg" ;>

播放GIF＆＃34; onmouseover＆＃34;，但只播放一次

2 个答案: