播放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」，但只播放一次

回答

相關問題