HTML5 图片加载特效
总共3种,
1、从左到右
2、从中间到两边
3。百叶窗
只要知道了原理,剩下的就是绘制了
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var image; var intervalId1; var intervalId2; var intervalId3; var drawW1 = 0; var canvas; var context; var drawLeft; var baiyechuangItemW ; function init(){ image = new Image(); image.src="1.png"; canvas = document.getElementById("canvas1"); context = canvas.getContext("2d"); drawLeft = image.width/2; } function startLeftToRight(){ clearInterval(intervalId1); context.clearRect(0,0,image.width,image.height); intervalId1 = setInterval("leftToRight();",100); } function leftToRight(){ context.drawImage(image,0,0,drawW1, image.height,0,0,drawW1,image.height); drawW1 += 2; if(drawW1>image.width){ drawW1 =0; clearInterval(intervalId1); } } function centerToOuter(){ drawW1 +=2; context.drawImage(image,drawLeft,0,drawW1,image.height,drawLeft,0,drawW1,image.height); drawLeft-=1; //这里肯定是drawLeft先执行到小于0 if(drawLeft<0){ drawLeft =0; drawW1 = 0; clearInterval(intervalId2); } } function startCenterToOuter(){ clearInterval(intervalId2); context.clearRect(0,0,image.width,image.height); intervalId2 = setInterval("centerToOuter();",100); } function baiyechuang(){ for(i=0;i<10;i++){alert('xfdfdd'); context.drawImage(image,baiyechuangItemW*i,0,drawW1,image.height,baiyechuangItemW*i,0,drawW1,image.height); } drawW1 +=1; if(drawW1>baiyechuangItemW){ clearInterval(intervalId3); } } function startBaiyechuang(){ drawW1=0; baiyechuangItemW = image.width/10; clearInterval(intervalId3); context.clearRect(0,0,image.width,image.height); intervalId3 = setInterval("baiyechuang();",100); } </script> </head> <body onload="init();"> <h1><input type="button" value="从左到右装载图片" onclick="startLeftToRight();"/></h1> <h1><input type="button" value=“从中间到两边加载图片" onclick="startCenterToOuter();"/></h1> <h1><input type="button" value="百叶窗方式装载图片" onclick="startBaiyechuang();"/></h1> <div> <canvas id="canvas1" width="400px" height="400px"></canvas> </div> </body> </html>