示例使用HTML5的canvas标签和Javascript脚本，简单的编写了装载图片效果，请使用支持HTML5的浏览器预览效果：
下图为以逐渐横向栅格的效果图
html部分： XML/HTML Code复制内容到剪贴板 <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <title>html5装载图片</title> </head> <body> <buttononclick="drawImg1()">从左到右</button> <buttononclick="drawImg2()">从中央到左右两边</button> <buttononclick="drawImg3()">以逐渐横向栅格</button> <hr/> <canvasclass="canvas"id="canvas"width="600"height="300"></canvas> </body> </html>
JavaScript部分：
XML/HTML Code复制内容到剪贴板 //初始化 varcanvas=document.getElementById("canvas"), context=canvas.getContext("2d"), image=newImage(); image.src="img/test.jpg"; //从左到右加载方法 functiondrawImg1(){ vardrawWidth=0, interval=setInterval(function(){ context.drawImage(image,0,0,drawWidth,image.height,0,0,drawWidth,image.height); drawWidth+=20; if(drawWidth>canvas.width)clearInterval(interval); },100); } //从中央向左右两边拉开加载方法 functiondrawImg2(){ vardrawWidth=0, drawLeft=canvas.width/2, interval=setInterval(function(){ context.drawImage(image,drawLeft,0,drawWidth,image.height,drawLeft,0,drawWidth,image.height); drawWidth+=20; drawLeft-=10; if(drawLeft<0)clearInterval(interval); },100); } //以逐渐横向栅格加载方法 functiondrawImg3(){ vardrawWidth=0, spaceWidth=canvas.width/20,//10指分割的块数 interval=setInterval(function(){ for(vari=0;i<20;i++){ context.drawImage(image,i*spaceWidth,0,drawWidth,image.height,i*spaceWidth,0,drawWidth,image.height); } drawWidth+=5; if(drawWidth>spaceWidth)clearInterval(interval); },100); }
以上内容是小编给大家介绍的HTML5 用动画的表现形式装载图像，希望对大家有所帮助！
【HTML5 用动画的表现形式装载图像】相关文章：
★ 使用HTML5 Canvas API中的clip()方法裁剪区域图像
★ HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
★ HTML5之WebGL 3D概述(下)—借助类库开发及框架介绍