我在我的网站上有一个 GIF,我希望它只在你悬停在它上面时播放,但只播放一次。所以我不希望用户能够再次触发事件,除非他们刷新页面。有人知道如何做到这一点?
到目前为止,我所拥有的是一个静态图像(gif 的第一帧),在 mouseover 上,它更改为一个不会循环的 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-: 0px 5px 8px 0px rgba(50, 50, 50, 0.75); }
这很容易通过移动你的 JavaScript 到一个函数,并添加removeAttribute('onmouseover')
后,它改变了src
。
function playGIF(elm) {
elm.src = '://www.image-mapper/photos/original/missing.png?1263880893';
elm.removeAttribute('onmouseover');
}
.footer {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:10px;
box-: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}
<img class="footer" src="://www.prelovac/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="playGIF(this);" />
JSFiddle:://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", "://www.thiefmissions/targa/fan.gif");
$(this).unbind('mouseenter mouseleave');
});
.footer {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
top:10px;
box-: 0px 5px 8px 0px rgba(50, 50, 50, 0.75);
}
<script src="s://ajax.googlea/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<img class="footer" src="images/website footer static.jpg" ;>
本站系公益性非盈利分享网址,本文来自用户投稿,不代表边看边学立场,如若转载,请注明出处
评论列表(58条)