gif commence à jouer sur le vol stationnaire et s'arrête lorsque mouseout?
I wana faire le ci-dessous gif qui effondrés au départ, mais elle commence à jouer sur le vol stationnaire et quand mouseout il s'arrête... quelqu'un peut-il m'aider??
Dans votre cas, la cause de l'animation n'est pas compliqué ,mon idée est de placer deux images sur une page (animées ou non). Et de montrer/cacher au survol de la souris.
Ou vous pouvez le faire même avec un simple CSS, si vous n'avez pas besoin d'un support pour IE6, qui ne déclenche hover événement sur quoi que ce soit mais <a>:
merci pour cette.. 🙂 Très élégante solution. L'animation fournis par les OP ne répète pas toujours. Si il est infini et l'animation, alors il ne répétez jamais avec cette approche. Cela m'a donné l'idée de penser à d'autres approches!! Cette solution n'a pas fonctionné pour moi dans FF.
le gif ne se charge pas, mais
.div { background: url('.png'); }
.div:hover { background: url('.gif'); }
sur hover il s'arrête au terme de la 1ère itération - le format GIF en boucle à l'infini dans l'ordre pour faire ce travail merci pour cette.. 🙂 causes des GIFs avec une répétition à l'infini de l'animation pour s'arrêter après la première itération? veillez à ne pas 🙂 c'est juste le GIF que l'OP - non pas infini (du moins pour moi), pistes 1 itération seulement Ah, oui. S'il veut utiliser cette animation, puis il vous soit nécessaire de redémarrer l'animation manuellement avec JS, ou, de préférence, il suffit d'éditer le GIF de sorte qu'il se répète à l'infini. Je sais que le vieux Adobe ImageReady pourrait le faire, mais je ne suis pas sûr de savoir comment vous modifier l'animation en boucle avec le courant de la Suite Creative Suite.
Si vous voulez juste pour montrer un statique de l'image quand il n'est pas l'animation, alors c'est aussi simple que de changer l'image sur le vol stationnaire (avec CSS ou JS).
Mais si vous voulez en fait geler l'animation sur l'image actuelle sur mouseout, alors la seule façon de le faire est par l'animation de l'image manuellement, par ex. avec du JS:
Remarque:
C'est une implémentation naïve. Pour la production de code, vous voulez pour précharger les images ou utilisez simplement spritemaps. Mais le concept de base est le même—d'animer manuellement l'image/bouton, de sorte que lorsque vous geler l'animation, il se fige sur l'image actuelle. L'alternative est d'utiliser quelque chose comme jsgif, qui utilise XHR pour télécharger le fichier GIF, analyse les données binaires d'extraire des images, puis rend l'utilisation de HTML5 Canvas.
Non, vous ne pouvez pas contrôler l'animation des images.
Vous aurait besoin de deux versions de chaque iamge, celui qui est animé, et celui qui ne l'est pas. Sur le vol stationnaire, vous pouvez changer facilement d'une image à l'autre.
Dans votre cas, la cause de l'animation n'est pas compliqué ,mon idée est de placer deux images sur une page (animées ou non). Et de montrer/cacher au survol de la souris.
Script:
CSS:
Ou vous pouvez le faire même avec un simple CSS, si vous n'avez pas besoin d'un support pour IE6, qui ne déclenche
hover
événement sur quoi que ce soit mais<a>
:CSS:
Très élégante solution. L'animation fournis par les OP ne répète pas toujours. Si il est infini et l'animation, alors il ne répétez jamais avec cette approche. Cela m'a donné l'idée de penser à d'autres approches!!
Cette solution n'a pas fonctionné pour moi dans FF.
OriginalL'auteur user907860
avez-vous besoin pour utiliser jquery ici?
le gif ne se charge pas, mais
.div { background: url('.png'); }
.div:hover { background: url('.gif'); }
hover
il s'arrête au terme de la 1ère itération - le format GIF en boucle à l'infini dans l'ordre pour faire ce travailmerci pour cette.. 🙂
causes des GIFs avec une répétition à l'infini de l'animation pour s'arrêter après la première itération?
veillez à ne pas 🙂 c'est juste le GIF que l'OP - non pas infini (du moins pour moi), pistes 1 itération seulement
Ah, oui. S'il veut utiliser cette animation, puis il vous soit nécessaire de redémarrer l'animation manuellement avec JS, ou, de préférence, il suffit d'éditer le GIF de sorte qu'il se répète à l'infini. Je sais que le vieux Adobe ImageReady pourrait le faire, mais je ne suis pas sûr de savoir comment vous modifier l'animation en boucle avec le courant de la Suite Creative Suite.
OriginalL'auteur lkiernan
Si vous voulez juste pour montrer un statique de l'image quand il n'est pas l'animation, alors c'est aussi simple que de changer l'image sur le vol stationnaire (avec CSS ou JS).
Mais si vous voulez en fait geler l'animation sur l'image actuelle sur mouseout, alors la seule façon de le faire est par l'animation de l'image manuellement, par ex. avec du JS:
et le code HTML suivant:
et ces images:
Remarque:
C'est une implémentation naïve. Pour la production de code, vous voulez pour précharger les images ou utilisez simplement spritemaps. Mais le concept de base est le même—d'animer manuellement l'image/bouton, de sorte que lorsque vous geler l'animation, il se fige sur l'image actuelle. L'alternative est d'utiliser quelque chose comme jsgif, qui utilise XHR pour télécharger le fichier GIF, analyse les données binaires d'extraire des images, puis rend l'utilisation de HTML5 Canvas.
OriginalL'auteur Lèse majesté
Non, vous ne pouvez pas contrôler l'animation des images.
Vous aurait besoin de deux versions de chaque iamge, celui qui est animé, et celui qui ne l'est pas. Sur le vol stationnaire, vous pouvez changer facilement d'une image à l'autre.
OriginalL'auteur prat1kk