HTML5 用动画的表现形式装载图像


Posted in HTML / CSS onMarch 08, 2016

示例使用HTML5的canvas标签和Javascript脚本,简单的编写了装载图片效果,请使用支持HTML5的浏览器预览效果:
下图为以逐渐横向栅格的效果图

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 用动画的表现形式装载图像,希望对大家有所帮助!

HTML / CSS 相关文章推荐
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
Sep 08 HTML / CSS
五个2015 年最佳HTML5 框架
Nov 11 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
mui几种页面跳转方式对比总结概括
Aug 18 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
HTML5页面无缝闪开的问题及解决方案
Jun 11 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
HTML5离线缓存Manifest是什么
Mar 09 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(一)
Mar 10 #HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
Mar 10 #HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 #HTML / CSS
Html5 postMessage实现跨域消息传递
Mar 11 #HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 #HTML / CSS
HTML5如何实现元素拖拽
Mar 11 #HTML / CSS
You might like
PHP中for循环语句的几种变型
2006/11/26 PHP
PHP一些有意思的小区别
2006/12/06 PHP
PHP的array_diff()函数在处理大数组时的效率问题
2011/11/27 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
用js实现的抽象CSS圆角效果!!
2007/05/03 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
为javascript添加String.Format方法
2020/08/11 Javascript
Javascript的构造函数和constructor属性
2010/01/09 Javascript
ExtJs使用IFrame的实现代码
2010/03/24 Javascript
javascript开发技术大全-第3章 js数据类型
2011/07/03 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
javascript实现方法调用与方法触发小结
2016/03/26 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
python开发环境PyScripter中文乱码问题解决方案
2016/09/11 Python
Django unittest 设置跳过某些case的方法
2018/12/26 Python
如何在django里上传csv文件并进行入库处理的方法
2019/01/02 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
Python参数传递及收集机制原理解析
2020/06/05 Python
html5中valid、invalid、required的定义
2014/02/21 HTML / CSS
初二物理教学反思
2014/01/29 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
校园环保标语
2014/06/13 职场文书
读完《骆驼祥子》的观后感!
2019/07/05 职场文书
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB