Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > H5-Tutorial > Hauptteil

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

WBOY
Freigeben： 2016-05-16 15:51:48
Original
1843 Leute haben es durchsucht

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!

Verwandte Etiketten：
html5动画表现形式 动画图像
Quelle：php.cn
Vorheriger Artikel：Verwenden Sie einfache Komponenten zum Vorladen von Bildern, um die Benutzererfahrung von HTML5-Mobilseiten zu verbessern. _HTML5-Tutorial-Fähigkeiten Nächster Artikel：Struktur und Semantik von HTML5 (4): Semantische Inline-Elemente_HTML5-Tutorialfähigkeiten
Erklärung dieser Website
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
Neueste Artikel des Autors
Aktuelle Ausgaben
Vanilla JS setTimeout(): Falsches Verhalten identifizieren Ich habe eine Animation auf meinem Hamburger-Menü, die in HTML, CSS und Vanilla-JavaScript...
Aus 2024-04-02 20:44:40
0
1
284
Wenn sich das Auswahlereignis ändert, löst die CSS-Animation den entsprechenden Effekt aus. Ich versuche, eine React-App zu erstellen. Im Moment habe ich ein Auswahleingabefeld mit e...
Aus 2024-04-01 09:16:28
0
1
350
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage