masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah > hujung hadapan web > Tutorial H5 > HTML5 memuatkan imej dalam bentuk animasi _html5 kemahiran tutorial

HTML5 memuatkan imej dalam bentuk animasi _html5 kemahiran tutorial

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Lepaskan： 2016-05-16 15:51:48
asal
1916 orang telah melayarinya

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!

Label berkaitan：
html5动画表现形式 动画图像
Artikel sebelumnya：Gunakan komponen pramuat imej mudah untuk meningkatkan pengalaman pengguna kemahiran tutorial _html5 halaman mudah alih html5 Artikel seterusnya：Struktur dan semantik HTML5 (4): Elemen sebaris semantik_html5 kemahiran tutorial
Kenyataan Laman Web ini
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 terbaru oleh pengarang
Isu terkini
javascript - Sila beritahu saya tentang masalah menukar fungsi panggil balik jq untuk menjanjikan pelaksanaan
daripada 1970-01-01 08:00:00
0
0
0
javascript - Kekeliruan tentang menghantar parameter dalam tindak balas
daripada 1970-01-01 08:00:00
0
0
0
javascript - gambar rajah tindanan atribut js
daripada 1970-01-01 08:00:00
0
0
0
javascript - aplikasi halaman tunggal angularjs Bagaimana untuk menyelesaikan masalah tidak menatal ke bahagian atas halaman selepas halaman menatal ke bawah dan navigasi melompat ke halaman baharu?
daripada 1970-01-01 08:00:00
0
0
0
javascript - Apabila membina projek dengan vue-cli, anda perlu memperkenalkan fail js dan CSS statik tempatan Bagaimana untuk membungkusnya?
daripada 1970-01-01 08:00:00
0
0
0
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan