html5进度条特效

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网页制作

html5进度条特效

来源：阅读：486 次日期：2015-01-26 14:58:42

温馨提示：小编为您整理了“html5进度条特效”,方便广大网友查阅！

请使用支持html5的浏览器查看本特效

代码如下:

<!doctype html>

<html>

<head>

<title>html5有特色的进度条</title>

<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>

/*==============================================*/

/* 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();

};

};</p> <p>/*========================================================*/

/* 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>

html5进度条

请使用支持html5的浏览器查看本页</div>

</div>

</body>

</html>

更多信息请查看IT技术专栏

上一篇：浅谈span和div的区别

下一篇：大图片根据分辨率自适应宽度仍居中显示

手机网站地址：html5进度条特效

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！