请使用支持HTML5的浏览器查看本特效 复制代码代码如下: HTML5有特色的进度条 <br />body {<br />background: #111;<br />color:White;<br />}<br />a{color:White;}<br />canvas {<br />background: #111;<br />border: 1px solid #171717;<br />display: block;<br />left: 50%;<br />margin: -51px 0 0 -201px;<br />position: absolute;<br />top: 50%;<br />}<br /> <br />/*==============================================*/<br />/* Light Loader<br />/*==================================================*/<br />var lightLoader = function (c, cw, ch) {<br />var _this = this;<br />this.c = c;<br />this.ctx = c.getContext('2d');<br />this.cw = cw;<br />this.ch = ch;<br />this.loaded = 0;<br />this.loaderSpeed = .6;<br />this.loaderHeight = 10;<br />this.loaderWidth = 310;<br />this.loader = {<br />x: (this.cw / 2) - (this.loaderWidth / 2),<br />y: (this.ch / 2) - (this.loaderHeight / 2)<br />};<br />this.particles = [];<br />this.particleLift = 180;<br />this.hueStart = 0<br />this.hueEnd = 120;<br />this.hue = 0;<br />this.gravity = .15;<br />this.particleRate = 4;<br />/*========================================================*/<br />/* Initialize<br />/*========================================================*/<br />this.init = function () {<br />this.loop();<br />};<br />/*========================================================*/<br />/* Utility Functions<br />/*========================================================*/<br />this.rand = function (rMi, rMa) { return ~ ~((Math.random() * (rMa - rMi + 1)) + rMi); };<br />this.hitTest = function (x1, y1, w1, h1, x2, y2, w2, h2) { return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1); };<br />/*========================================================*/<br />/* Update Loader<br />/*========================================================*/<br />this.updateLoader = function () {<br />if (this.loaded < 100) {<br />this.loaded += this.loaderSpeed;<br />} else {<br />this.loaded = 0;<br />}<br />};<br />/*========================================================*/<br />/* Render Loader<br />/*========================================================*/<br />this.renderLoader = function () {<br />this.ctx.fillStyle = '#000';<br />this.ctx.fillRect(this.loader.x, this.loader.y, this.loaderWidth, this.loaderHeight);<br />this.hue = this.hueStart + (this.loaded / 100) * (this.hueEnd - this.hueStart);<br />var newWidth = (this.loaded / 100) * this.loaderWidth;<br />this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, 40%, 1)';<br />this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight);<br />this.ctx.fillStyle = '#222';<br />this.ctx.fillRect(this.loader.x, this.loader.y, newWidth, this.loaderHeight / 2);<br />};<br />/*========================================================*/<br />/* Particles<br />/*========================================================*/<br />this.Particle = function () {<br />this.x = _this.loader.x + ((_this.loaded / 100) * _this.loaderWidth) - _this.rand(0, 1);<br />this.y = _this.ch / 2 + _this.rand(0, _this.loaderHeight) - _this.loaderHeight / 2;<br />this.vx = (_this.rand(0, 4) - 2) / 100;<br />this.vy = (_this.rand(0, _this.particleLift) - _this.particleLift * 2) / 100;<br />this.width = _this.rand(1, 4) / 2;<br />this.height = _this.rand(1, 4) / 2;<br />this.hue = _this.hue;<br />};<br />this.Particle.prototype.update = function (i) {<br />this.vx += (_this.rand(0, 6) - 3) / 100;<br />this.vy += _this.gravity;<br />this.x += this.vx;<br />this.y += this.vy;<br />if (this.y > _this.ch) {<br />_this.particles.splice(i, 1);<br />}<br />};<br />this.Particle.prototype.render = function () {<br />_this.ctx.fillStyle = 'hsla(' + this.hue + ', 100%, ' + _this.rand(50, 70) + '%, ' + _this.rand(20, 100) / 100 + ')';<br />_this.ctx.fillRect(this.x, this.y, this.width, this.height);<br />};<br />this.createParticles = function () {<br />var i = this.particleRate;<br />while (i--) {<br />this.particles.push(new this.Particle());<br />};<br />};<br />this.updateParticles = function () {<br />var i = this.particles.length;<br />while (i--) {<br />var p = this.particles[i];<br />p.update(i);<br />};<br />};<br />this.renderParticles = function () {<br />var i = this.particles.length;<br />while (i--) {<br />var p = this.particles[i];<br />p.render();<br />};<br />}; <p>/*========================================================*/<br />/* Clear Canvas<br />/*========================================================*/<br />this.clearCanvas = function () {<br />this.ctx.globalCompositeOperation = 'source-over';<br />this.ctx.clearRect(0, 0, this.cw, this.ch);<br />this.ctx.globalCompositeOperation = 'lighter';<br />};<br />/*========================================================*/<br />/* Animation Loop <br />/*========================================================*/<br />this.loop = function () {<br />var loopIt = function () {<br />requestAnimationFrame(loopIt, _this.c);<br />_this.clearCanvas();<br />_this.createParticles();<br />_this.updateLoader();<br />_this.updateParticles();<br />_this.renderLoader();<br />_this.renderParticles();<br />};<br />loopIt();<br />};<br />};<br />/*========================================================*/<br />/* Check Canvas Support<br />/*========================================================*/<br />var isCanvasSupported = function () {<br />var elem = document.createElement('canvas');<br />return !!(elem.getContext && elem.getContext('2d'));<br />};<br />/*========================================================*/<br />/* Setup requestAnimationFrame<br />/*========================================================*/<br />var setupRAF = function () {<br />var lastTime = 0;<br />var vendors = ['ms', 'moz', 'webkit', 'o'];<br />for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {<br />window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];<br />window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];<br />};<br />if (!window.requestAnimationFrame) {<br />window.requestAnimationFrame = function (callback, element) {<br />var currTime = new Date().getTime();<br />var timeToCall = Math.max(0, 16 - (currTime - lastTime));<br />var id = window.setTimeout(function () { callback(currTime + timeToCall); }, timeToCall);<br />lastTime = currTime + timeToCall;<br />return id;<br />};<br />};<br />if (!window.cancelAnimationFrame) {<br />window.cancelAnimationFrame = function (id) {<br />clearTimeout(id);<br />};<br />};<br />};<br />/*========================================================*/<br />/* Define Canvas and Initialize<br />/*========================================================*/<br />if (isCanvasSupported) {<br />var c = document.createElement('canvas');<br />c.width = 400;<br />c.height = 100;<br />var cw = c.width;<br />var ch = c.height;<br />document.body.appendChild(c);<br />var cl = new lightLoader(c, cw, ch);<br />setupRAF();<br />cl.init();<br />}<br /> HTML5进度条请使用支持HTML5的浏览器查看本页
