wjlgryx
- 浏览: 297931 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
开发小菜：
支持IE9以下的吗？
HTML5+CSS3+JQuery打造自定义视频播放器 -
攻城使：
开发Html5必须得下载么，我用dw编写，把文件复制到myec ...
html5开发 myeclipse安装aptana插件 -
疾风鹰狼：
...
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码 -
sardodo：
你好，我想问下，导入例子中的.dae格式模型是可以看到旋转的小 ...
c3dl 初步认识 -
BIOHAZARDX：
下载学习，初学者膜拜一下。
html5 实现动画（三）
1. <!DOCTYPE html>
2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5. <title>HTML5 Demo: canvas</title>
6. <style>
7. body {
8. font: normal 16px/20px Helvetica, sans-serif;
9. background: rgb(237, 237, 236);
10. margin: 0;
11. margin-top: 40px;
12. padding: 0;
13. }
14.
15. article, section, header, footer {
16. display: block;
17. }
18.
19. #wrapper {
20. width: 600px;
21. margin: 0 auto;
22. background: #fff url(images/shade.jpg) repeat-x center bottom;
23. -moz-border-radius: 10px;
24. -webkit-border-radius: 10px;
25. border-top: 1px solid #fff;
26. padding-bottom: 76px;
27. }
28.
29. h1 {
30. padding-top: 10px;
31. }
32.
33. h2 {
34. font-size: 100%;
35. font-style: italic;
36. }
37.
38. header,
39. article > *,
40. footer a,
41. footer p {
42. margin: 20px;
43. }
44.
45. footer > * {
46. margin: 20px;
47. color: #999;
48. }
49.
50. article {
51. position: relative;
52. }
53. </style>
54. <script>
55. // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
56. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
57. </script>
58. </head>
59. <body>
60. <section id="wrapper">
61. <header>
62. <h1>Canvas</h1>
63.
64. </header>
65. <article></article>
66. <footer><a href="/">HTML5 demo</a></footer>
67. </section>
68. <script src="h5utils.js"></script>
69. <script>
70.
71. buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
72.
73. function buildSpinner(data) {
74.
75. var canvas = document.createElement('canvas');
76. canvas.height = 100;
77. canvas.width = 300;
78. document.getElementsByTagName('article')[0].appendChild(canvas);
79. var ctx = canvas.getContext("2d"),
80. i = 0, degrees = data.degrees, loops = 0, degreesList = [];
81.
82. for (i = 0; i < degrees; i++) {
83. degreesList.push(i);
84. }
85.
86. // reset
87. i = 0;
88.
89. // so I can kill it later
90. window.canvasTimer = setInterval(draw, 1000/degrees);
91.
92. function reset() {
93. ctx.clearRect(0,0,100,100); // clear canvas
94.
95. var left = degreesList.slice(0, 1);
96. var right = degreesList.slice(1, degreesList.length);
97. degreesList = right.concat(left);
98. }
99.
100. function draw() {
101. var c, s, e;
102.
103. var d = 0;
104.
105. if (i == 0) {
106. reset();
107. }
108.
109. ctx.save();
110.
111. d = degreesList[i];
112. c = Math.floor(255/degrees*i);
113. ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
114. ctx.lineWidth = data.size;
115. ctx.beginPath();
116. s = Math.floor(360/degrees*(d));
117. e = Math.floor(360/degrees*(d+1)) - 1;
118.
119. ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
120. ctx.stroke();
121.
122. ctx.restore();
123.
124. i++;
125. if (i >= degrees) {
126. i = 0;
127. }
128. }
129. }
130.
131.
132. </script>
133. <script>
134. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
135. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
136. </script>
137. <script>
138. try {
139. var pageTracker = _gat._getTracker("UA-1656750-18");
140. pageTracker._trackPageview();
141. } catch(err) {}</script>
142. </body>
143.
144. </html>
2. <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
3. <head>
4. <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
5. <title>HTML5 Demo: canvas</title>
6. <style>
7. body {
8. font: normal 16px/20px Helvetica, sans-serif;
9. background: rgb(237, 237, 236);
10. margin: 0;
11. margin-top: 40px;
12. padding: 0;
13. }
14.
15. article, section, header, footer {
16. display: block;
17. }
18.
19. #wrapper {
20. width: 600px;
21. margin: 0 auto;
22. background: #fff url(images/shade.jpg) repeat-x center bottom;
23. -moz-border-radius: 10px;
24. -webkit-border-radius: 10px;
25. border-top: 1px solid #fff;
26. padding-bottom: 76px;
27. }
28.
29. h1 {
30. padding-top: 10px;
31. }
32.
33. h2 {
34. font-size: 100%;
35. font-style: italic;
36. }
37.
38. header,
39. article > *,
40. footer a,
41. footer p {
42. margin: 20px;
43. }
44.
45. footer > * {
46. margin: 20px;
47. color: #999;
48. }
49.
50. article {
51. position: relative;
52. }
53. </style>
54. <script>
55. // For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
56. (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
57. </script>
58. </head>
59. <body>
60. <section id="wrapper">
61. <header>
62. <h1>Canvas</h1>
63.
64. </header>
65. <article></article>
66. <footer><a href="/">HTML5 demo</a></footer>
67. </section>
68. <script src="h5utils.js"></script>
69. <script>
70.
71. buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
72.
73. function buildSpinner(data) {
74.
75. var canvas = document.createElement('canvas');
76. canvas.height = 100;
77. canvas.width = 300;
78. document.getElementsByTagName('article')[0].appendChild(canvas);
79. var ctx = canvas.getContext("2d"),
80. i = 0, degrees = data.degrees, loops = 0, degreesList = [];
81.
82. for (i = 0; i < degrees; i++) {
83. degreesList.push(i);
84. }
85.
86. // reset
87. i = 0;
88.
89. // so I can kill it later
90. window.canvasTimer = setInterval(draw, 1000/degrees);
91.
92. function reset() {
93. ctx.clearRect(0,0,100,100); // clear canvas
94.
95. var left = degreesList.slice(0, 1);
96. var right = degreesList.slice(1, degreesList.length);
97. degreesList = right.concat(left);
98. }
99.
100. function draw() {
101. var c, s, e;
102.
103. var d = 0;
104.
105. if (i == 0) {
106. reset();
107. }
108.
109. ctx.save();
110.
111. d = degreesList[i];
112. c = Math.floor(255/degrees*i);
113. ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
114. ctx.lineWidth = data.size;
115. ctx.beginPath();
116. s = Math.floor(360/degrees*(d));
117. e = Math.floor(360/degrees*(d+1)) - 1;
118.
119. ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
120. ctx.stroke();
121.
122. ctx.restore();
123.
124. i++;
125. if (i >= degrees) {
126. i = 0;
127. }
128. }
129. }
130.
131.
132. </script>
133. <script>
134. var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
135. document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
136. </script>
137. <script>
138. try {
139. var pageTracker = _gat._getTracker("UA-1656750-18");
140. pageTracker._trackPageview();
141. } catch(err) {}</script>
142. </body>
143.
144. </html>
分享到：
发表评论
-
iframe 高度自适应
2011-11-03 17:07 1320转自：http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件：
2011-06-22 14:07 14381.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10041 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1244One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1395版权声明：转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1134你一整年都像现在一样沮丧，这我知道。所有铁杆Objecti ... -
很给力，20个HTML5视频播放器及代码
2011-05-09 14:45 1924本文来源： http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 909本文来自：http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2852本文转自：http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1506本文来自：http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1150JS APIs： 选择器 W3C草案：Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1375本文转自：http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 704css中display属性的参考值： display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6681简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1080设置为预加载的 video 元素： <vide ... -
HTML5 – Video
2011-05-06 12:51 999在HTML5以前若我們要在網頁中播放影片時，需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7479超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1032Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 738В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1361html5 代码： <video width ...
相关推荐
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ，一共是4个网页加载特效动画，这些Loading看上去是不是很眼熟，在手机上或PC端见到的几率比较大，纯HTML5 SVG技术实现，没有使用任何图片资源，而且个个精美。...
收集一些基于HTML5技术生成的网页动画加载动画，canvas loaders，也就是大家所熟悉的网页Loading特效，这个不是真正的Loading，是基于CSS3绘制出来的Loading动画效果，可用于网页Loading中，这些小动画个个都十分...
vue+element实现动态加载表单 ...本文实例为大家分享了vue+element实现动态加载表单的具体代码，供大家参考，具体内容如下 一、问卷动态加载表单 //html ...> v-for="n in paperForm.answerList" :label="n....
使用选项返回给定元素的LoadingLock实例。 有效的选项是： size : 加载微调器的尺寸（数字） diameter 。 var locker = loading ( document . getElementById ( 'example' ) , { size : 80 } ) ; 。锁（） 锁定...
9种移动开发专用的HTML5加载条动画效果，纯CSS3实现的网页进度条特效，支持HTML5的浏览器就能完美支持，Android手机、iPhone都可以很好的支持，这些进度条每一款的风格都不相同，都带有动画效果，而且没有使用任何的...
HTML+CSS3打造的流光按钮 是不是有点小好看 HTML+CSS小实例之全屏导航栏菜单 HTML+CSS小实例之菜单悬停效果 HTML+CSS小实例之炫彩爱心加载特效 HTML+CSS小实例之粘性小球loading效果 HTML+CSS小实例之鼠标悬停发光...
Allows you to bind a function to be executed when the DOM document has finished loading. This function behaves just like $(document).ready(), in that it should be used to wrap other $() operations on ...
ECHO.js 纯javascript轻量级延迟加载的实例代码 演示 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>简单的JavaScript图像延迟加载库Echo.js</title&...
本文实例讲述了jquery显示loading图片直到网页加载完成的方法。分享给大家供大家参考。具体实现方法如下： <!DOCTYPE html> <html class=no-js> <head> <meta charset='UTF-8'> <title&...
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。 第一种效果： HTML部分 XML/HTML Code复制内容...
本文实例讲述了JS基于Ajax实现的网页Loading效果代码。分享给大家供大家参考，具体如下： 这是一款很不错的网页Loading效果，常用于Ajax交互式网页设计中，点击按钮即可弹出Loading框，若Loading框未加载完成时关闭...
本文实例为大家分享了JS实现网页加载中效果的具体代码，供大家参考，具体内容如下 需要材料： 一张loading动画的gif图片 基本逻辑： 模态框遮罩 + loading.gif动图， 默认隐藏模态框 页面开始发送Ajax请求数据时，...
本文实例讲述了jQuery实现彩带延伸效果的网页加载条loading动画。分享给大家供大家参考，具体如下： 这里介绍的jQuery彩带效果网页加载条动画，我觉得挺有创意的，虽然难度不算大，但能想到用这样一个背景来做...
-- 加载ExtJS的资源 --> <!-- 注意加载顺序 --> <script type="text/javascript" src="./scripts/ext/adapter/ext/ext-base.js"> <script type="text/javascript" src="./scripts/ext/ext-all.js"> ...
使用jQuery插件jQuery Image Flyout弹出图片，实现javascript弹出放大图片功能只需要一行代码即可实现。 四，用户自定义设置 结合jQuery插件Easing Plugin，可增强javascript图片放大和缩小过程中图片显示的效果。 ...
摘要:脚本资源,CSS特效,CSS3 本代码是运用了CSS3技术生成的动画效果，主要生成了一些网页上常见到的Loading加载小图片效果，你不要以为它是一张制作好的GIF图片，实际上它完全是用CSS3技术生成的网页动画，并没有...
本文实例讲述了原生javaScript实现图片延时加载的方法。图片延时加载其实是有jquery插件了并且加载方法非常的简单并且合理了，但有朋友觉得加载jquery插件包太大了，于时自己写了一个，给各位分享一下。 首先，图片...
今天和大家分享一个以SVG图像为主的loading加载动画，现在移动端网页使用比较多，若还用GIF做loading图片的话，可能会影响图像的质量，所以使用SVG是一个不错的方式。 这次展示的代码由 Aurer 编写，前端人员只需要...
要做一个异步登录，打算给用户做一点提示，所以就网上找了点代码，自己修改新增了一些，做了一个html+css+js的功能封装，以备未来直接使用。 html <!-- 缓冲提示条 --> 正在登陆 <div class=rect1></div...
22.6 Gmail右上角的Loading效果 22.7 使用XMLHTTP获取天气预报 22.8 拖拽任意对象 22.9 避免打开无效页面 22.10 用JavaScript调用Google AdSense 22.11 Ajax效果：可拖拽的表格 22.12 JavaScript调用Web Service ...