recherche

Maison >interface Web >Tutoriel H5 >HTML5 charge des images sous forme d'animation _html5 tutoriel compétences

HTML5 charge des images sous forme d'animation _html5 tutoriel compétences

WBOY
WBOYoriginal
2016-05-16 15:51:481865parcourir

L'exemple utilise la balise HTML5 canvas et le script Javascript pour écrire simplement l'effet de l'image de chargement. Veuillez utiliser un navigateur prenant en charge HTML5 pour prévisualiser l'effet :
L'image ci-dessous montre l'effet d'une grille progressivement horizontale
.

partie html :
Code XML/HTMLCopier le contenu dans le presse-papiers
  1. > 
  2. <html lang="fr" > 
  3. <tête> 
  4. <méta charset="UTF- 8"> 
  5. <titre>html5 chargement de l'image titre> 
  6. tête> 
  7. <corps> 
  8. <bouton onclique="drawImg1( )">De gauche à droitebouton>
  9. <bouton onclique="drawImg2( )">Du centre vers les côtés gauche et droitbouton>
  10. <bouton onclique="drawImg3( " > <hr/> 
  11. <toile classe
    12. =
  12. "toile" id="toile" largeur="600" hauteur="300">toile>  corps> 
  13. html> 
  14. Partie JavaScript : Code XML/HTML
    15. Copier le contenu dans le presse-papiers
  1. //Initialisation
  2. var canvas = document.getElementById("canvas"),
  3. context = canvas.getContext("2d"),
  4. image = nouveau Image();
  5. image.src = "img/test.jpg"
    6. //Méthode de chargement de gauche à droite
    7. fonction drawImg1(){
    8. var
  8. drawWidth = 0,
  9. intervalle = setInterval(function(){
    10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height
  10. );
    11. drawWidth = 20;
    12. if(drawWidth
  12. > canvas.width) clearInterval(intervalle); },100);
  13. }
  14. //Ouvrez la méthode de chargement du centre vers les côtés gauche et droit
  15. fonction drawImg2(){
  16. var
    17. drawWidth
  17. = 0,
    18. drawLeft
  18. = canvas.width/2,
    19. intervalle
  19. = setInterval(function(){ context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height
    20. );
  20. drawWidth = 20;
  21. drawLeft
    22. -
  22. = 10 if(drawLeft
    23. <
  23. 0) clearInterval(intervalle); },100);
    24. }
    25. //Méthode de chargement de grille progressivement horizontale
    26. fonction drawImg3(){
    27. var
  27. drawWidth
    28. =
  28. 0, spaceWidth
    29. =
  29. canvas.width/20, //10 fait référence au nombre de blocs divisés intervalle
    30. =
  30. setInterval(function(){ pour(var i
    31. =
  31. 0;i<20;i ){ context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height );
    32. }
    33. drawWidth = 5;
    34. if(drawWidth
  34. > spaceWidth) clearInterval(intervalle);
  35. },100);
  36. }

Le contenu ci-dessus est introduit par l'éditeur pour charger des images sous forme d'animation en HTML5. J'espère qu'il sera utile à tout le monde !

Déclaration：
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
Article précédent：Utilisez des composants simples de préchargement d'images pour améliorer l'expérience utilisateur des pages mobiles HTML5 _Compétences du didacticiel HTML5Article suivant：Utilisez des composants simples de préchargement d'images pour améliorer l'expérience utilisateur des pages mobiles HTML5 _Compétences du didacticiel HTML5

Articles Liés

Voir plus