HTML5進(jìn)度條特效
發(fā)布時(shí)間：2014-12-18 15:25:36 作者：佚名 
我要評論
我要評論這篇文章主要介紹了HTML5進(jìn)度條特效,需要的朋友可以參考下
請使用支持HTML5的瀏覽器查看本特效
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>HTML5有特色的進(jìn)度條</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">
/*==============================================*/
/* 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>
<div style="position:absolute; top: 0;width:100%">
<div class="footer-banner" style="width:728px;margin:10px auto;color:White">
HTML5進(jìn)度條
請使用支持HTML5的瀏覽器查看本頁</div>
</div>
</body>
</html>
相關(guān)文章
HTML5超炫酷粒子效果的進(jìn)度條的實(shí)現(xiàn)示例
這篇文章主要介紹了HTML5超炫酷粒子效果的進(jìn)度條的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來2019-08-23HTML5觸摸事件實(shí)現(xiàn)移動端簡易進(jìn)度條的實(shí)現(xiàn)方法
這篇文章主要介紹了HTML5觸摸事件實(shí)現(xiàn)移動端簡易進(jìn)度條的實(shí)現(xiàn)方法的相關(guān)資料,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-04HTML5實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果
本文給大家介紹了HTML5實(shí)現(xiàn)自帶進(jìn)度條和滑塊滑桿效果，運(yùn)用progress標(biāo)簽，設(shè)置好min和max數(shù)值就好，可以用value獲取其中的進(jìn)度值。具體實(shí)現(xiàn)代碼大家參考下本文2018-04-17html5新增的定時(shí)器requestAnimationFrame實(shí)現(xiàn)進(jìn)度條功能
html5為什么新增一個(gè)requestAnimationFrame，他的出現(xiàn)是為了解決什么問題？帶著這些問題跟隨腳本之家小編一起學(xué)習(xí)吧2018-12-13
HTML5 Canvas 實(shí)現(xiàn)圓形進(jìn)度條并顯示數(shù)字百分比效果示例
本篇文章主要介紹了HTML5 Canvas 實(shí)現(xiàn)圓形進(jìn)度條并顯示數(shù)字百分比效果示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-18
HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)，下載進(jìn)度條的代碼實(shí)例
本篇文章主要介紹了HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)，下載進(jìn)度條的代碼實(shí)例，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-30
HTML5 Canvas玩轉(zhuǎn)酷炫大波浪進(jìn)度圖效果實(shí)例（附demo）
本篇文章主要介紹了HTML5 Canvas玩轉(zhuǎn)酷炫大波浪進(jìn)度圖效果實(shí)例，非常具有使用價(jià)值，有需要的可以了解一下。2016-12-14使用Html5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條
下面小編就為大家?guī)硪黄褂肏tml5實(shí)現(xiàn)異步上傳文件,支持跨域,帶有上傳進(jìn)度條。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-17淺談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問題
下面小編就為大家?guī)硪黄獪\談Html5中視頻 音頻標(biāo)簽 進(jìn)度條的問題。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-26HTML5中的進(jìn)度條progress元素簡介及兼容性處理
HTML5能夠用progress標(biāo)簽直接向頁面添加進(jìn)度條,這還是相當(dāng)exciting的,不過各瀏覽器下的默認(rèn)顯示效果會有差異,這里我們就來看看HTML5中的進(jìn)度條progress元素簡介及兼容性處2016-06-02
