播放GIF“onmouseover”，但只播放一次

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

我到目前为止是一个静态图像（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); }

来源

2015-01-15 Popcorn727

一种方法是去除图像的onmouseover事件元素被触发后。 – Dennis

好的，你知道如何做到这一点吗？ – Popcorn727

这很容易通过移动你的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 class="footer" src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" onmouseover="playGIF(this);" />

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

如果你看的img作为代码在Developer Tools中渲染时，您会注意到在将鼠标移动到图像上方之前，会出现onmouseover属性，但在移动该属性时，图像会立即变为0132的属性标签。这将防止图像在随后的鼠标上被重新加载。

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

编辑

因为它似乎你的“的回答一问题，”我的回答评论被拆除，我会在这里我对它的解释。

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

这就是语言的工作原理。 HTML5在我们可以做的事情上有很大的改进，但它仍然是一个固定的呈现代码。一旦这些代码被渲染出来，你需要一些更动态的操作。先进的HTML5将支持这些方面的一些功能，但我们正在谈论高端开发，这将依赖于JavaScript。也许在HTML6中我们会看到动态渲染，但我对此表示怀疑。

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

来源

2015-01-15 14:39:22

试试这个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" ;>

来源

2015-01-15 14:41:06 Akshay

播放GIF“onmouseover”，但只播放一次

回答

相关问题