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 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 HTML / CSS
canvas实现飞机打怪兽射击小游戏的示例代码
Jul 09 HTML / CSS
html通过canvas转成base64的方法
Jul 18 HTML / CSS
HTML5 语义化结构化规范化
Oct 17 HTML / CSS
使用html5制作loading图的示例
Apr 14 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
关于解决iframe标签嵌套问题的解决方法
Mar 04 HTML / CSS
AmazeUI底部导航栏与分享按钮的示例代码
Aug 18 HTML / CSS
HTML5适合的情人节礼物有纪念日期功能
Jan 25 HTML / CSS
HTML5 新增内容和 API详解
Nov 17 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中变量及部分适用方法
2008/03/27 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
php获取新浪微博数据API实例
2013/11/12 PHP
php类中的各种拦截器用法分析
2014/11/03 PHP
你应该知道PHP浮点数知识
2015/05/13 PHP
利用php抓取蜘蛛爬虫痕迹的示例代码
2016/09/30 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
PHP中cookie知识点学习
2018/05/06 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
javascript qq右下角滑出窗口 sheyMsg
2010/03/21 Javascript
js multiple全选与取消全选实现代码
2012/12/04 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
vue.js input框之间赋值方法
2018/08/24 Javascript
原生js实现的移动端可拖动进度条插件功能详解
2019/08/15 Javascript
详解ES6 Promise的生命周期和创建
2019/08/18 Javascript
vue-socket.io接收不到数据问题的解决方法
2020/05/13 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python3一行代码实现图片文字识别的示例
2018/01/15 Python
python爬虫获取淘宝天猫商品详细参数
2020/06/23 Python
python特性语法之遍历、公共方法、引用
2018/08/08 Python
Python3.6.2调用ffmpeg的方法
2019/01/10 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
Python 实现自动完成A4标签排版打印功能
2020/04/09 Python
HTML5 Canvas标签使用收录
2009/07/07 HTML / CSS
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
企业宣传工作方案
2014/06/02 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
会议主持人开场白台词
2015/05/28 职场文书
公司食堂管理制度
2015/08/05 职场文书
酒店员工管理制度
2015/08/05 职场文书
2019通用版导游词范本!
2019/08/07 职场文书