cari

Rumah >hujung hadapan web >Tutorial H5 >HTML5 memuatkan imej dalam bentuk animasi _html5 kemahiran tutorial

HTML5 memuatkan imej dalam bentuk animasi _html5 kemahiran tutorial

WBOY
WBOYasal
2016-05-16 15:51:481863semak imbas

Contoh menggunakan teg kanvas HTML5 dan skrip Javascript untuk hanya menulis kesan imej pemuatan Sila gunakan penyemak imbas yang menyokong HTML5 untuk pratonton kesan:
Gambar di bawah menunjukkan kesan grid mendatar secara beransur-ansur
.

bahagian html:
Kod XML/HTMLSalin kandungan ke papan keratan
  1. > 
  2. <html lang="en" > 
  3. <kepala> 
  4. <meta charset="UTF- 8"> 
  5. <tajuk>imej memuatkan HTML5 tajuk> 
  6. kepala> 
  7. <badan> 
  8. <butang onklik="drawImg1( )">Dari kiri ke kananbutang>
  9. <butang onklik="drawImg2( )">Dari tengah ke sisi kiri dan kananbutang>
  10. <butang onklik="drawImg3( " > <jam/> 
  11. <kanvas kelas
    12. =
  12. "kanvas" id="kanvas" lebar="600" tinggi="300">kanvas>  badan> 
  13. html> 
  14. Bahagian JavaScript: Kod XML/HTML
    15. Salin kandungan ke papan keratan
  1. //Permulaan
  2. var kanvas = dokumen.getElementById("kanvas"),
  3. konteks = kanvas.getContext("2d"),
  4. imej = baharu Imej(
  5. imej.src = "img/test.jpg"
  6. //Kaedah memuatkan dari kiri ke kanan
  7. function drawImg1(){
  8. var drawWidth = 0,
  9. selang = setInterval(fungsi(){
  10. context.drawImage(imej, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);
    11. drawWidth = 20;
  11. if(drawWidth
    12. >
  12. canvas.width) clearInterval(selang waktu); },100);
    13. }
    14. //Buka kaedah pemuatan dari tengah ke sisi kiri dan kanan
    15. function drawImg2(){
    16. var
  16. drawWidth
    17. =
  17. 0, drawLeft
    18. =
  18. kanvas.lebar/2, selang
    19. =
  19. setInterval(fungsi(){ context.drawImage(imej, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height); drawWidth = 20;
    20. drawLeft
  20. -
    21. =
  21. 10
  22. jika(drawLeft < 0
    23. ) clearInterval(selang);
  23. },100); }
    24. //Kaedah pemuatan grid mendatar secara beransur-ansur
    25. function drawImg3(){
    26. var
  26. drawWidth
    27. =
  27. 0
    28. ,
  28. spaceWidth = kanvas
    29. .width/20, //10 merujuk kepada bilangan blok terbahagi
  29. selang = setInterval
    30. (fungsi(){
  30. untuk(var i = 0
    31. ;i
  31. <20;i ){ context.drawImage(imej, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height); } drawWidth = 5;
    32. if(drawWidth
  32. >
    33. spaceWidth) clearInterval(interval
    34. },100);
  34. }

Kandungan di atas diperkenalkan oleh editor untuk memuatkan imej dalam bentuk animasi dalam HTML5. Saya harap ia akan membantu semua orang!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Gunakan komponen pramuat imej mudah untuk meningkatkan pengalaman pengguna kemahiran tutorial _html5 halaman mudah alih html5Artikel seterusnya：Gunakan komponen pramuat imej mudah untuk meningkatkan pengalaman pengguna kemahiran tutorial _html5 halaman mudah alih html5

Artikel berkaitan

Lihat lagi