停止gif動畫onload

Question

我有一個頁面有很多的GIF。

<div ng-repeat="sign in signs.List"> 
<img ng-src="{{sign.src}}" width="200" height="150" /> 
</div> 

我正在尋找

1在頁面加載所有的GIF =>動畫停止

2鼠標懸停=>動畫開始爲一個GIF

3在mouseout =>動畫再次停止該gif

我想這可以在AngularJs中完成，但我不知道如何。

Answer 1

默認情況下，您無法控制gif動畫循環。 在這種情況下，可能最簡單的方法是擁有2張圖片：一張應該是動畫，另一張應該是簡單的圖片。 您應該將它們放在容器內，並且只在懸停時顯示動畫。類似的東西：

<div class="img-container" ng-repeat="sign in signs.List"> 
    <img class="animated" ng-src="{{sign.animated_src}}" width="200" height="150" /> 
    <img class="simple" ng-src="{{sign.simple_src}}" width="200" height="150" /> 
</div> 

在你的CSS然後你把這個代碼：

.animated { 
    display:none 
} /* by default animated pic is hidden */ 
.img-container:hover .animated { 
    display:block; 
} 
.img-container:hover .simple { 
    display: none; 
} /* hide simple image and display animated on mouseover */ 

如果你沒有還沒有動畫圖像的版本，因爲某些原因無法提供它：你可以使用畫布在瀏覽器中編程。這裏是nice explanation如何做到這一點。