suchen

Heim  >  Artikel  >  Web-Frontend  >  HTML5 lädt Bilder in Form von Animationen. _HTML5-Tutorial-Fähigkeiten

HTML5 lädt Bilder in Form von Animationen. _HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:51:481844Durchsuche

Das Beispiel verwendet das HTML5-Canvas-Tag und das Javascript-Skript, um einfach den Ladebildeffekt zu schreiben. Bitte verwenden Sie einen Browser, der HTML5 unterstützt, um eine Vorschau des Effekts anzuzeigen:
Das Bild unten zeigt den Effekt eines allmählich horizontalen Rasters

HTML-Teil:
XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. > 
  2. <html lang="en" > 
  3. <Kopf> 
  4. <meta charset="UTF- 8"> 
  5. <Titel>HTML5-Ladebild Titel> 
  6. Kopf> 
  7. <Körper> 
  8. <button onclick="drawImg1( )">Von links nach rechtsSchaltfläche>
  9. <button onclick="drawImg2( )">Von der Mitte zur linken und rechten SeiteSchaltfläche>
  10. <button onclick="drawImg3( " > <Std./> 
  11. <canvas class
    12. =
  12. "canvas" id="canvas" width="600" Höhe="300">Leinwand>  Körper> 
  13. html> 
  14. JavaScript-Teil: XML/HTML-Code
    15. Inhalt in die Zwischenablage kopieren
  1. //Initialisierung
  2. var canvas = document.getElementById("canvas"),
  3. context = canvas.getContext("2d"),
  4. image = new Image(
  5. image.src = "img/test.jpg";
    6. //Lademethode von links nach rechts
    7. Funktion drawImg1(){
    8. var
  8. drawWidth = 0,
  9. interval = setInterval(function(){
    10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);
  10. drawWidth = 20;
  11. if(drawWidth
    12. >
  12. canvas.width) clearInterval(interval); },100);
  13. }
  14. //Öffnen Sie die Lademethode von der Mitte nach links und rechts
  15. Funktion drawImg2(){
  16. var
    17. drawWidth
  17. = 0,
    18. drawLeft
  18. = Leinwand.width/2,
    19. interval
  19. = setInterval(function(){ context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);
    20. drawWidth = 20;
    21. drawLeft
  21. -
    22. =
  22. 10; if(drawLeft <
    23. 0
  23. ) clearInterval(interval); },100); }
  24. //Schrittweise horizontale Gitterlademethode
  25. Funktion drawImg3(){
  26. var
    27. drawWidth
  27. =
    28. 0
  28. , spaceWidth =
    29. canvas
  29. .width/20, // 10 bezieht sich auf die Anzahl der geteilten Blöcke interval =
    30. setInterval
  30. (function(){ for(var i =
    31. 0
  31. ;i<20;i ){ context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height); }
  32. drawWidth = 5;
  33. if(drawWidth
    34. >
  34. spaceWidth) clearInterval(interval);
    35. },100);
  35. }

Der oben genannte Inhalt wird vom Editor zum Laden von Bildern in Form von Animationen in HTML5 eingeführt. Ich hoffe, dass er für alle hilfreich ist!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Verwenden Sie einfache Komponenten zum Vorladen von Bildern, um die Benutzererfahrung von HTML5-Mobilseiten zu verbessern. _HTML5-Tutorial-FähigkeitenNächster Artikel：Verwenden Sie einfache Komponenten zum Vorladen von Bildern, um die Benutzererfahrung von HTML5-Mobilseiten zu verbessern. _HTML5-Tutorial-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen