HTML5有特色的进度条
查看效果:http://keleyi.com/keleyi/phtml/html5/26.htm
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>HTML5有特色的进度条-柯乐义</title>
<base target="_blank" />
<style>
body {
background: #111;
color:White;
}
a{color:White;}
canvas {
background: #111;
border: 1px solid #171717;
display: block;
left: 50%;
margin: -51px 0 0 -201px;
position: absolute;
top: 50%;
}
</style>
</head>
<body>
<script type="text/javascript">
/*==================keleyi.com============================*/
/* Light Loader
/*==================柯乐义================================*/
var lightLoader = function (c, cw, ch) { var _this = this;
this.c = c;
this.ctx = c.getContext('2d');
this.cw = cw;
this.ch = ch; this.loaded = 0;
this.loaderSpeed = .6;
this.loaderHeight = 10;
this.loaderWidth = 310;
this.loader = {
x: (this.cw / 2) - (this.loaderWidth / 2),
y: (this.ch / 2) - (this.loaderHeight / 2)
};
this.particles = [];
this.particleLift = 180;
this.hueStart = 0
this.hueEnd = 120;
this.hue = 0;
this.gravity = .15;
this.particleRate = 4; /*========================================================*/
/* Initialize
/*========================================================*/
this.init = function () {
this.loop();
}; /*========================================================*/
/* Utility Functions
/*========================================================*/
this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi + 1)) + rMi); };
this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); }; /*========================================================*/
/* Update Loader
/*========================================================*/
this.updateLoader = function () {
if (this.loaded < 100) {
this.loaded += this.loaderSpeed;
} else {
this.loaded = 0;
}
}; /*========================================================*/
/* Render Loader
/*========================================================*/
this.renderLoader = function () {
this.ctx.fillStyle = '#000';
this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight); this.hue = this.hueStart + (this.loaded / 100) * (this.hueEnd - this.hueStart); var newWidth = (this.loaded / 100) * this.loaderWidth;
this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 40%, 1)';
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight); this.ctx.fillStyle = '#222';
this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2);
}; /*========================================================*/
/* Particles
/*========================================================*/
this.Particle = function () {
this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth) - _this.rand(0, 1);
this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2;
this.vx = (_this.rand(0, 4) - 2) / 100;
this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;
this.width = _this.rand(1, 4) / 2;
this.height = _this.rand(1, 4) / 2;
this.hue = _this.hue;
}; this.Particle.prototype.update = function (i) {
this.vx += (_this.rand(0, 6) - 3) / 100;
this.vy += _this.gravity;
this.x += this.vx;
this.y += this.vy; if (this.y > _this.ch) {
_this.particles.splice(i, 1);
}
}; this.Particle.prototype.render = function () {
_this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + _this.rand(50, 70) + '%, ' + _this.rand(20, 100) / 100 + ')';
_this.ctx.fillRect(this.x, this.y, this.width, this.height);
}; this.createParticles = function () {
var i = this.particleRate;
while (i--) {
this.particles.push(new this.Particle());
};
}; this.updateParticles = function () {
var i = this.particles.length;
while (i--) {
var p = this.particles[i];
p.update(i);
};
}; this.renderParticles = function () {
var i = this.particles.length;
while (i--) {
var p = this.particles[i];
p.render();
};
}; /*========================================================*/
/* Clear Canvas
/*========================================================*/
this.clearCanvas = function () {
this.ctx.globalCompositeOperation = 'source-over';
this.ctx.clearRect(0, 0, this.cw, this.ch);
this.ctx.globalCompositeOperation = 'lighter';
}; /*========================================================*/
/* Animation Loop 柯 乐 义
/*========================================================*/
this.loop = function () {
var loopIt = function () {
requestAnimationFrame(loopIt, _this.c);
_this.clearCanvas(); _this.createParticles(); _this.updateLoader();
_this.updateParticles(); _this.renderLoader();
_this.renderParticles(); };
loopIt();
}; }; /*========================================================*/
/* Check Canvas Support
/*========================================================*/
var isCanvasSupported = function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
}; /*========================================================*/
/* Setup requestAnimationFrame
/*========================================================*/
var setupRAF = function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}; if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}; if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
};
}; /*========================================================*/
/* Define Canvas and Initialize
/*========================================================*/
if (isCanvasSupported) {
var c = document.createElement('canvas');
c.width = 400;
c.height = 100;
var cw = c.width;
var ch = c.height;
document.body.appendChild(c);
var cl = new lightLoader(c, cw, ch); setupRAF();
cl.init();
}
</script>
<div style="position:absolute; top: 0;width:100%">
<div class="footer-banner" style="width:728px;margin:10px auto;color:White">
HTML5进度条<br />
请使用<a href="http://keleyi.com/a/bjac/g039tue3.htm">支持HTML5的浏览器</a>查看本页 <a href="http://keleyi.com/a/bjad/8lva67xl.htm">原文</a></div>
</div> </body>
</html>
转载自：http://keleyi.com/a/bjad/8lva67xl.htm
web前端资源：http://www.cnblogs.com/jihua/p/webfront.html
HTML5有特色的进度条的更多相关文章
- 简直要逆天！超炫的 HTML5 粒子效果进度条
我喜欢粒子效果作品,特别是那些能够应用于实际的,例如这个由 Jack Rugile 基于 HTML5 Cavnas 编写的进度条效果.看着这么炫的 Loading 效果,即使让我多等一会也无妨:)你呢 ...
- html5 svg 圆形进度条
html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 详解HTML5中的进度条progress元素简介及兼容性处理
一.progress元素基本了解 1.基本知识 progress元素属于HTML5家族,指进度条.IE10+以及其他靠谱浏览器都支持. 注释:Internet Explorer 9 以及更早的版本不支 ...
- 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code
最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...
- HTML5圆形百分比进度条插件circleChart
在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...
- html5 canvas画进度条
这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...
- HTML5效果：Canvas 实现圆形进度条并显示数字百分比
实现效果 1.首先创建html代码 <canvas id="canvas" width="500" height="500" styl ...
- 9个绚丽多彩的HTML5进度条动画赏析
进度条在网页应用中越来越广泛了,特别是现在的页面异步局部刷新时代,进度条可以让用户更好的等待操作结果.本文要分享9款绚丽多彩的HTML5进度条动画,有很多还是挺实用的,效果也非常不错. 1.CSS3发 ...
- ajax-属性、原理、实现html5进度条上传文件
一.远古ajax实现方式如下: 1.前端请求后台,后台设置返回 http状态码204 2.运用img图片(或css/javascript等)的加载机制,请求后台 3.post提交数据,运用iframe ...
随机推荐
- 单页面实现之hash
至学了angularJs后,发现这个单页面应用不知道在没有angularJs的情况下怎么实现. 所以就此对这个思考与资料并行,终于知道这个的实现基本原理. 首先angularJs的实现是hash值的变 ...
- SQL Server 创建数据库邮件
一. 背景 数据库发邮件通知数据库的运行状态(状态可以通过JOB形式获取)和信息,达到预警的效果. 二. 基础知识 msdb系统数据库保存有关Job,Database Mail,Nodifyicati ...
- xcode常见错误处理
问题:xcode 7编译错误:bitcode is not supported on versions of iOS prior to 6.0 解决:Build Options | Enable Bi ...
- 《JS设计模式笔记》 1,单例模式
<script type="text/javascript"> //单例模式 //1,每次点击都会生成一个新的div var createMask=function ( ...
- 前端学PHP之运算符
× 目录 [1]总括 [2]算术运算符 [3]赋值运算符[4]位运算符[5]比较运算符[6]错误控制[7]逻辑运算符[8]字符串连接[9]数组运算符 前面的话 运算符是可以通过给出的一或多个表达式来产 ...
- javascript中15种原生对象类型系统综述
前面的话 在编程语言中,能够表示并操作的值的类型称做数据类型,编程语言最基本的特性就是能够支持多种数据类型.javascript拥有强大的类型系统,主要包括原生对象.宿主对象和浏览器拓展对象,本文主要 ...
- JAVA实现发送电子邮件
相信大家对于网站也好,手机app也好,用户注册时,需要进行邮箱验证的功能特别好奇吧,本篇我将带领大家一起实现一下这个简单而又神奇的小功能,让我们的应用也可以加入这些神奇的元素.废话不多说,下面开始我们 ...
- 窥探Swift之函数与闭包的应用实例
今天的博客算是比较基础的,还是那句话,基础这东西在什么时候都是最重要的.说到函数,只要是写过程序就肯定知道函数是怎么回事,今天就来讨论一下Swift中的函数的特性以及Swift中的闭包.今天的一些小实 ...
- php对文本文件进行分页功能简单实现
php对文本文件进行分页功能简单实现 <!DOCTYPE> <html> <head> <meta http-equiv="Content-type ...
- ZOJ Problem Set - 1241 Geometry Made Simple
水题不解释 #include <stdio.h> #include <math.h> int main() { ,flag=; double a,b,c; while(scan ...