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 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 HTML / CSS
html5 浏览器支持 如何让所有的浏览器都支持HTML5标签样式
Dec 07 HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 HTML / CSS
html5 input属性使用示例
Jun 28 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 HTML / CSS
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
Mar 31 HTML / CSS
CSS3鼠标悬浮过渡缩放效果
Apr 17 HTML / CSS
html+css实现滚动到元素位置显示加载动画效果
Aug 02 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获取文件大小的方法
2014/02/26 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
CodeIgniter控制器之业务逻辑实例分析
2016/01/20 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
return false;和e.preventDefault();的区别
2010/07/11 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
2014/03/08 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
JSON格式化输出
2014/11/10 Javascript
Javascript的闭包详解
2014/12/26 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue打包使用Nginx代理解决跨域问题
2018/08/27 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
Python实现PS图像调整黑白效果示例
2018/01/25 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
纯CSS3实现圆角效果(含IE兼容解决方法)
2014/05/07 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
台湾最大银发乐活百货:乐龄网
2018/05/21 全球购物
英国女性时尚品牌:Apricot
2018/12/04 全球购物
澳大利亚在线高跟鞋商店:Shoe Me
2019/11/19 全球购物
adidas菲律宾官网:adidas PH
2020/02/07 全球购物
方正Java笔试题
2014/07/03 面试题
毕业生求职的求职信
2013/12/05 职场文书
协议书怎么写
2014/04/21 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
社区端午节活动总结
2015/02/11 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
幼儿园迎新生欢迎词
2015/09/30 职场文书
python 爬取豆瓣网页的示例
2021/04/13 Python
Python 如何利用ffmpeg 处理视频素材
2021/11/27 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers