示例使用HTML5的canvas标签和Javascript脚本，简单的编写了装载图片效果，请使用支持HTML5的浏览器预览效果：

下图为以逐渐横向栅格的效果图

html部分：
XML/HTML Code
复制内容到剪贴板

  1. <!DOCTYPE html>    
  2. <html lang=“en”>    
  3. <head>    
  4. <meta charset=“UTF-8”>    
  5. <title>html5 装载图片</title>    
  6. </head>    
  7. <body>    
  8. <button onclick=“drawImg1()”>从左到右</button>    
  9. <button onclick=“drawImg2()”>从中央到左右两边</button>    
  10. <button onclick=“drawImg3()”>以逐渐横向栅格</button>    
  11. <hr/>    
  12. <canvas class=“canvas” id=“canvas” width=“600” height=“300”></canvas>    
  13. </body>    
  14. </html>   


JavaScript部分：

　
XML/HTML Code
复制内容到剪贴板

  1. 　//初始化    
  2. var canvas = document.getElementById(“canvas”),    
  3. context = canvas.getContext(“2d”),    
  4. image = new Image();    
  5. image.src = “img/test.jpg”;    
  6. //从左到右加载方法    
  7. function drawImg1(){    
  8. var drawWidth = 0,    
  9. interval = setInterval(function(){    
  10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height);    
  11. drawWidth += 20;    
  12. if(drawWidth > canvas.width) clearInterval(interval);    
  13. },100);    
  14. }    
  15. //从中央向左右两边拉开加载方法    
  16. function drawImg2(){    
  17. var drawWidth = 0,    
  18. drawLeft = canvas.width/2,    
  19. interval = setInterval(function(){    
  20. context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height);    
  21. drawWidth += 20;    
  22. drawLeft –= 10;    
  23. if(drawLeft < 0) clearInterval(interval);    
  24. },100);    
  25. }    
  26. //以逐渐横向栅格加载方法    
  27. function drawImg3(){    
  28. var drawWidth = 0,    
  29. spaceWidth = canvas.width/20, //10指分割的块数    
  30. interval = setInterval(function(){    
  31. for(var i = 0;i<20;i++){    
  32. context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height);    
  33. }    
  34. drawWidth += 5;    
  35. if(drawWidth > spaceWidth) clearInterval(interval);    
  36. },100);    
  37. }  

以上内容是小编给大家介绍的HTML5 用动画的表现形式装载图像，希望对大家有所帮助！


声明：本站（华域联盟www.cnhackhy.com）所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。