Maison > interface Web > js tutoriel > Comment utiliser jquery pour afficher progressivement les images

Comment utiliser jquery pour afficher progressivement les images

coldplay.xixi
Libérer: 2023-01-04 09:37:17
original
3408 Les gens l'ont consulté

Comment utiliser jquery pour afficher progressivement l'image : utilisez d'abord la balise img pour créer une image et créez un bouton bouton ; puis obtenez l'objet img dans la fonction, utilisez la méthode [fadeIn()], et définissez-le dans la méthode Spécifiez le nombre de secondes pour afficher progressivement l'image.

Comment utiliser jquery pour afficher progressivement les images

L'environnement d'exploitation de ce tutoriel : système Windows7, version jquery3.2.1, ordinateur thinkpad t480.

Comment utiliser jquery pour afficher progressivement une image :

1 Créez un nouveau fichier html, nommé test.html, pour expliquer comment faire apparaître une image avec. jquery s'est progressivement révélé.

Comment utiliser jquery pour afficher progressivement les images

2. Dans le fichier test.html, dans la balise p, utilisez la balise img pour créer une image et définissez l'identifiant de l'image sur myimg, qui est principalement utilisé ci-dessous pour transmettre l'identifiant Obtenez l'objet img.

Comment utiliser jquery pour afficher progressivement les images

3. Dans le fichier test.html, définissez le style CSS de la balise img et définissez display sur none pour masquer l'image.

Comment utiliser jquery pour afficher progressivement les images

4. Dans le fichier test.html, utilisez la balise bouton pour créer un bouton avec le nom "Image progressivement affichée".

Comment utiliser jquery pour afficher progressivement les images

5. Dans le fichier test.html, liez l'événement onclick au bouton Lorsque vous cliquez sur le bouton, exécutez la fonction disimg().

Comment utiliser jquery pour afficher progressivement les images

6. Dans la balise js, créez la fonction disimg() Dans la fonction, obtenez l'objet img via id (myimg) et utilisez la méthode fadeIn(). pour afficher progressivement l'image. Sortez, par exemple, pour que l'image apparaisse progressivement sur 5 secondes.

Comment utiliser jquery pour afficher progressivement les images

7. Ouvrez le fichier test.html dans le navigateur, cliquez sur le bouton pour voir l'effet.

Comment utiliser jquery pour afficher progressivement les images

Recommandations d'apprentissage gratuites associées : javascript (vidéo)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal