我在我的网站上有一个 GIF,我希望它只在你悬停在它上面时播放,但只播放一次。所以我不希望用户能够再次触发事件,除非他们刷新页面。有人知道如何做到这一点?
到目前为止，我所拥有的是一个静态图像（gif 的第一帧），在 mouseover 上，它更改为一个不会循环的 gif。
HTML格式
<img cl="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); }
这很容易通过移动你的 JavaScript 到一个函数，并添加removeAttribute('onmouseover')后，它改变了src。
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 cl="footer" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="playGIF(this);" />JSFiddle:http://jsfiddle.net/mavpx438/
如果您查看 Developer Tools 中呈现的img代码，您会注意到，在将鼠标移到图像上之前，onmouseover属性是存在的，但是当您移到图像上时，图像会立即发生变化，然后删除img标记的onmouseover属性。
我希望这会有所帮助。^ ^
Edit因为它似乎你的“回答问题”和我的回应评论被删除，我会在这里添加我的解释。
您曾询问是否仅使用 HTML / CSS。尽管我们使用伪:hover执行鼠标悬停效果，但它会将显示恢复到原始状态，而不会进行任何更改。更改呈现的代码的唯一方法是通过脚本进行永久更改，这是您需要做的。
这就是语言的工作方式。HTML5 在我们可以做的事情上有了很大的改进，但它仍然是一个固定的渲染代码。一旦代码被渲染，你需要一些更动态的操作。高级 HTML5 将允许一些功能，但我们正在谈论高端开发，这将依赖于 JavaScript。也许使用 HTML5 我们会看到动态渲染，但我对此表示怀疑。
我希望这些额外的信息有助于澄清为什么 HTML / CSS 选项不是一个。
试试这个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.googlea.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img cl="footer" src="images/website footer static.jpg" ;>本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处
评论列表（29条）