HTML5 memuatkan imej dalam bentuk animasi _html5 kemahiran tutorial-Tutorial H5-php.cn

HTML5 memuatkan imej dalam bentuk animasi _html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:51:48

asal

1847 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

>
<html lang="en" >
<kepala>
<meta charset="UTF- 8">
<tajuk>imej memuatkan HTML5 tajuk>
kepala>
<badan>
<butang onklik="drawImg1( )">Dari kiri ke kananbutang>
<butang onklik="drawImg2( )">Dari tengah ke sisi kiri dan kananbutang>
<butang onklik="drawImg3( " > <jam/>
<kanvas kelas
"kanvas" id="kanvas" lebar="600" tinggi="300">kanvas> badan>
html>
Bahagian JavaScript: Kod XML/HTML

//Permulaan
var kanvas = dokumen.getElementById("kanvas"),
konteks = kanvas.getContext("2d"),
imej = baharu Imej(
imej.src = "img/test.jpg"
//Kaedah memuatkan dari kiri ke kanan
function drawImg1(){
var drawWidth = 0,
selang = setInterval(fungsi(){
context.drawImage(imej, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);
if(drawWidth
canvas.width) clearInterval(selang waktu); },100);
drawWidth
0, drawLeft
kanvas.lebar/2, selang
setInterval(fungsi(){ context.drawImage(imej, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height); drawWidth = 20;
-
10
jika(drawLeft < 0
},100); }
drawWidth
0
spaceWidth = kanvas
selang = setInterval
untuk(var i = 0
<20;i ){ context.drawImage(imej, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height); } drawWidth = 5;
>
}

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