html css Animation Gif
J'ai un .gif jouer l'animation. Il ne tourne pas en boucle et je ne veux pas qu'il la boucle.
J'ai 2 images, ("1 png" et "1 gif animé")
Je veux que chaque fois, quand la souris est sur l'image png, le gif joue.
Mon problème est que lorsque j'ai mis ma souris positon sur l'Image png, le gif jouer une seule fois et s'arrêter. Quand je bouge la souris, puis déplacez en arrière sur l'image, il ne joue pas plus.
Mon code CSS :
#icon{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent;
}
#icon:hover{
float: left;
width:50px;
height:50px;
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent;
}
#icon
est un DIV
Parce que c'est mis à jouer qu'une seule fois, ce que vous voulez probablement à faire, c'est ajouter quelque chose à la fin de
pouvez-vous me donner un exemple avec le code que j'ai (j'ai Modifier mon post et de mettre les codes)
utiliser inline GIFs à faire pour un instant l'animation et pas de redownloads.
.gif
lorsque vous passez la souris sur le png, de sorte .gif?rnd=12334
, cela permettra d'assurer que le gif
est re-téléchargé et animer une fois de plus.pouvez-vous me donner un exemple avec le code que j'ai (j'ai Modifier mon post et de mettre les codes)
utiliser inline GIFs à faire pour un instant l'animation et pas de redownloads.
OriginalL'auteur LeSam | 2013-06-13
Vous devez vous connecter pour publier un commentaire.
Par défaut, vous ne pouvez pas contrôler le GIF, en boucle ou de l'animation. Le navigateur va juste jouer le GIF.
Donc, par défaut, il est impossible de dire whén ou combien de temps le GIF doit jouer.
Il y a trois solutions:
1. Vous remplacez le src de l'img avec un
data:image
de sorte que vous inline le GIF. Chaque fois que la src changements, le GIF va jouer à nouveau. À l'aide de la ligne GIF au lieu d'une URL réelle, il n'y a pas de télécharger à nouveau le GIF, afin de gagner du temps. Voir http://www.websiteoptimization.com/speed/tweak/inline-images/ pour un exemple2. Comme dit dans les commentaires, et les autres réponses, vous pouvez remplacer la src de la balise img avec le même GIF mais avec un appendum à l'URL (comme ?someRandomNumber=1345), de sorte qu'il sera re-télécharger le GIF et jouer à nouveau. Inconvénient est que le GIF sera retéléchargé.
3. Vous utilisez quelque chose comme http://slbkbs.org/jsgif/ pour télécharger le GIF via AJAX, puis de dessiner à l'aide d'un élément canvas, et avoir le plein contrôle sur elle...
OriginalL'auteur Willem Mulder
Vous aurez besoin de prendre l'image de la CSS pour que cela fonctionne, et l'utilisation
img src=
Mais vous pouvez modifier cela:
Ce que ce n'est
Vous pourriez faire cela dans une fonction et d'en extraire les bits que vous n'avez pas besoin, de sorte que chaque fois que vous passez sur le png - il demander à l' .image gif à nouveau, car il y aurait un nombre différent ajouté à la fin de celui-ci.
attr()
au lieu deprop()
poursrc
.prop()
est utilisé pour les valeurs booléennes.Oups, je suis bête, fixe.
Grâce à vous, j'espère que ce ll fonctionne, je l'ai mis comme "résolu" mais je ne peux pas essayer pour l'instant... Merci de toute façon
C'est tout à fait inefficace depuis le GIF doit être retéléchargé chaque fois que vous voulez jouer. Que les coûts de la bande passante, et il faut du temps avant que l'image est chargée, de sorte que votre UX n'est jamais instantanée. Mieux utiliser inline GIFs, voir mon autre réponse.
Liés, ils ont utilisé une solution similaire - stackoverflow.com/a/7669524/2470724 et jsfiddle.net/64fZa/5
OriginalL'auteur Nick R
La boucle est une propriété de la GIF. La meilleure façon de le faire serait de modifier le GIF pour permettre à l'animation de boucle à l'infini. La plupart des éditeurs d'image qui acceptent les animations GIF ont une option de "Boucle" qui peut être défini à true.
Sinon, vous pouvez le faire dans un hacky façon avec JavaScript par le rechargement de l'image ou de la re-cuisson hover après un certain délai (voir
window.setInterval
).mouseover
de l'événement et de l'ensemble de l'élément d'arrière-planstyle
à cette image, puis de détecter lesmouseout
de l'événement et de faire revenir le style par défaut. Êtes-vous à l'aide de jQuery?OriginalL'auteur James Donnelly