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 ...
随机推荐
- C#设计模式-建造者模式
在软件系统中,有时需要创建一个复杂对象,并且这个复杂对象由其各部分子对象通过一定的步骤组合而成. 例如一个采购系统中,如果需要采购员去采购一批电脑时,在这个实际需求中,电脑就是一个复杂的对象,它是由C ...
- iOS-证书申请
本文讲述发布证书的申请 首先登陆https://developer.apple.com(99美元账号) a.点击页面右上角 b.进入 c.选择证书类型 distribution,选择添加 d.点击+后 ...
- MySQL_01之MySQL数据库基础
1.通过SQL(结构化查询语言)操作数据库: DDL:数据定义语言,创建库,创建表,选择: DML:数据操作语言,完成数据增删改: DQL:数据查询语言,完成数据查询: DCL:数据控制语言,授权.回 ...
- Java各种排序算法详解
排序大的分类可以分为两种:内排序和外排序.在排序过程中,全部记录存放在内存,则称为内排序,如果排序过程中需要使用外存,则称为外排序.下面讲的排序都是属于内排序. 内排序有可以分为以下几类: (1).插 ...
- lua中的string类型
在lua中用union TString来表示字符串类型 lobject.h: 其中结构体tsv中 reserved字段表示字符串是不是保留关键字,hash是其哈希值,len是其长度.我们在TStrin ...
- WPF绘制折线
WPF后台绘制折线,填充到一个GRID下 private void btnPreview_Click(object sender, RoutedEventArgs e) { GridImg.Child ...
- Bootstrap Metronic 学习记录（一）简介
1.简介 是一个基于Bootstrap 3.x的高级管理控制面板主题.Bootstrap Metronic - 是一个完全响应式管理模板.基于Bootstrap3框架.高度可定制的,易于使用.适合从小 ...
- 细说gulp
一.概述&安装 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1. 压缩js 2. 压缩css 3. 压缩less 4. 压缩图片 等等… 我们完 ...
- iOS开发之使用XMPPFramework实现即时通信(一)
关于XMPP的理论介绍在本篇博客中就不做赘述了,如何在我们之前的微信中加入XMPP协议来实现通信呢?下面将会介绍一下XMPP的基本的知识,让我们的微信可以实现互联通信.要做的准备工作是要有服务器支持X ...
- Objective-C中的语法糖
写这篇博客源于一个疑问:“WoK~, 这也行?!”.刚接触OC不久,今天做深浅拷贝的测试,无意中把获取NSArray的值写成了用下标获取的方式.当时把注意力放在了深浅拷贝的内存地址分析上了,就没太在意 ...