wjlgryx
- 浏览: 313884 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
开发小菜：
支持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 1380转自：http://apps.hi.baidu.com/sha ... -
WordPress 博客添加新浪微博挂件：
2011-06-22 14:07 14871.点击链接http://t.sina ... -
HTML5 影音 ( Video ) 概論
2011-05-25 16:25 10821 Video介紹 引用我翻譯文檔《在HTML5頁面 ... -
HTML5 Audio Loops
2011-05-19 16:49 1298One of the neatest things abo ... -
处理火狐自动播放视频
2011-05-18 17:54 1472版权声明：转载时请 ... -
教你用HTML5开发iPhone应用程序
2011-05-13 17:38 1238你一整年都像现在一样沮丧，这我知道。所有铁杆Objecti ... -
很给力，20个HTML5视频播放器及代码
2011-05-09 14:45 1998本文来源： http://www.uleadesi ... -
HTML 5 Video概述
2011-05-09 13:32 1043本文来自：http://www.xlnv.ne ... -
支持移动平台的Html5播放器
2011-05-09 13:25 2925本文转自：http://www.riameeting ... -
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
2011-05-09 13:22 1588本文来自：http://www.myext.cn/web ... -
HTML5资源
2011-05-09 11:56 1255JS APIs： 选择器 W3C草案：Selecto ... -
HTML5 Audio/Video 标签,属性,方法,事件
2011-05-09 11:53 1445本文转自：http://directguo.com/blo ... -
DIV实现隐藏与显示
2011-05-06 15:23 775css中display属性的参考值： display:n ... -
HTML5+CSS3+JQuery打造自定义视频播放器
2011-05-06 12:57 6752简介HTML5的<video> ... -
HTML 5 <video> preload 属性
2011-05-06 12:54 1180设置为预加载的 video 元素： <vide ... -
HTML5 – Video
2011-05-06 12:51 1077在HTML5以前若我們要在網頁中播放影片時，需要使用Act ... -
超過 23 個開源的 HTML5 影音播放器與框架
2011-05-06 12:03 7545超過 23 個開源的 HTML5 影音播放器與框架 - ... -
Building a better HTML5 video player with Glow
2011-05-06 11:51 1100Last year I wrote a post (Bu ... -
Ambilight для тэга video
2011-05-06 11:49 794В некоторых топовых моделях т ... -
怎样用js+html5实现视频的播放控制
2011-05-06 11:46 1433html5 代码： <video width ...
相关推荐
及网摘JQuery实例”似乎是一个关于使用jQuery进行网页加载效果和网络摘录的实践教程。下面将详细讨论jQuery的核心概念以及如何运用它们来实现上述功能。 首先，jQuery的引入是为了简化JavaScript的复杂性，通过提供...
在"HTML5 SVG Loading加载特效.zip"这个压缩包中，很可能包含了一系列的HTML文件、SVG图形文件、CSS样式表和JavaScript脚本，它们共同构成了一个或多个加载动画的实例。开发者可以通过查看和学习这些示例代码，理解...
收集一些手机端可用的HTML5 SVG Loading 动画加载特效 ，一共是4个网页加载特效动画，这些Loading看上去是不是很眼熟，在手机上或PC端见到的几率比较大，纯HTML5 SVG技术实现，没有使用任何图片资源，而且个个精美。...
在网页开发中，用户体验是至关重要的，特别是在处理大量数据或者执行长时间操作时，为了不让用户感到界面卡顿或无响应，通常会使用“加载中”（Loading）动画来提示用户程序正在后台工作。jQuery.spin.js就是一个...
总的来说，"13款html5 svg页面loading加载动画效果"是一个展示HTML5与SVG结合使用，以及CSS3动画技术在创建现代网页交互元素方面的强大能力的实例集。这些技术的应用不仅提升了用户体验，也反映了Web开发的最新趋势...
本文介绍了一种使用JavaScript实现的自定义显示加载等待图片插件，该插件能够动态地在页面上加载一个预设的加载动画图片（例如loading.gif），并在加载完成后将其隐藏。 ### 插件的关键特点 1. **动态加载实现**：...
在本资源"HTML5 SVG实现的Loading动画加载特效源码.zip"中，我们将深入探讨如何利用SVG和HTML5来制作动态的加载动画。 1. SVG的基本概念：SVG是一种基于XML的图形格式，它允许开发者用文本方式定义图形元素，如线条...
在这个场景中，我们将讨论如何在Vue项目中实现“vue loading”页面加载动画提示。 首先，`loading.js` 文件可能是实现这个功能的主要JavaScript代码。在Vue.js中，我们可以创建一个全局组件来处理加载状态。组件...
"jQuery遮罩Loading加载特效"是一个利用jQuery实现的在页面加载期间显示遮罩层的特效，为用户提供一种友好的等待体验。 首先，我们来看`index.html`。这个文件通常是项目的核心，它包含了HTML结构，引入了jQuery库...
这个"CSS3代码实现加载动画loading特效.rar"压缩包就是针对这一主题的实例教程。 首先，我们来了解CSS3中实现加载动画的关键技术： 1. **动画关键帧（@keyframes）**：这是CSS3中创建动画的核心，它定义了动画从...
本资源包"css3实现loading动画加载.zip"提供了一些实例，帮助我们理解如何使用CSS3实现各种loading动画。 1. **关键帧动画（@keyframes）** CSS3的关键帧动画允许开发者定义一个动画过程中的多个状态，浏览器会...
本压缩包包含的“5个可爱的CSS3 Loading加载动画”就是一个很好的实例，展示了CSS3在实现动态界面方面的强大能力。 1. **HTML5基础**：HTML5是构建网页内容的基础，它提供了一系列新的元素和API，使网页结构更清晰...
综上所述，"阿玉写loading.rar"这个压缩包很可能是提供了一些HTML和CSS3实现的炫酷加载动画示例，帮助开发者学习如何通过这些技术创建吸引人的网页加载效果。通过深入理解和实践这些知识点，你可以为你的网站增添更...
收集一些基于HTML5技术生成的网页动画加载动画，canvas loaders，也就是大家所熟悉的网页Loading特效，这个不是真正的Loading，是基于CSS3绘制出来的Loading动画效果，可用于网页Loading中，这些小动画个个都十分...
除了GIF，还可以使用HTML5的Canvas或SVG实现更复杂、更动态的加载动画。Canvas提供了编程绘制图形的能力，而SVG则提供了矢量图支持，这两种方式都可以实现更流畅的动画效果，且文件大小可能更小。 综上所述，“加载...
总的来说，"html5-canvas-shine-loading"是一个展示HTML5 Canvas动态效果的实例，它利用了Canvas的绘图能力以及JavaScript的动画框架，为用户呈现了一个有趣且引人入胜的加载过程。这样的加载页不仅可以提升用户体验...
在提供的"lazyLoading.rar"压缩包中，包含了一个完整的实现图片懒加载的实例。其中，HTML5页面应该包含了使用`data-src`的`<img>`标签，JavaScript文件（可能是.js后缀）则包含了处理滚动事件和图片加载逻辑的代码。...
本资源包含了一个使用HTML5、CSS3和SVG实现的Loading动画加载特效。在网页加载过程中，Loading动画能够提供视觉反馈，让用户知道页面正在准备就绪，从而提高用户体验。以下是四种不同动画效果的详细解析： 1. **...
总的来说，"按钮点击loading加载"是一个将jQuery与CSS3相结合的实例，展示了如何通过JavaScript响应用户操作，并利用CSS3动画提供视觉反馈，提升Web应用的用户体验。这样的技术实践对于前端开发者来说是非常有价值的...
在本文中，我们将深入探讨如何使用HTML5的Canvas API来创建引人注目的加载（Loading）动画。Canvas是HTML5的一项重要特性，它允许开发者在网页上进行动态图形绘制，从而实现各种复杂的视觉效果，包括动画。"Canvas...