HTML进度条元素,jquery进度条特效
请使用支持HTML5的浏览器查看本特效
复制代码代码如下：
！声明文档类型
超文本标记语言
头
meta charset=UTF-8
titleHTML5有特色的进度条/标题
基本目标=_blank /
风格
正文{
背景：# 111;
颜色：白色；
}
一{颜色：白色；}
画布{
背景：# 111;
边框：1px固体# 171717
显示：块；
左：50%;
边距：-51px 0 0-201 px；
位置：绝对；
top:50%；
}
/风格
/头
身体
脚本类型=文本/javascript
/*==============================================*/
/*轻型装载机
/*==================================================*/
var lightLoader=function (c，cw，ch) {
var _ this=this
this.c=c
这个。CTX=c .获取上下文( 2d )；
this.cw=cw
this.ch=ch
这个。loaded=0；
这个。装载机速度=。6;
this.loaderHeight=10
this.loaderWidth=310
this.loader={
x:(这个。CW/2)-(这个。装载机宽度/2)，
y:(这个。ch/2)-(这个。装载机高度/2)
};
这个。粒子=[]；
this.particleLift=180
this.hueStart=0
this.hueEnd=120
这个。色相=0；
这个.重力=.15
这个。粒子率=4；
/*========================================================*/
/*初始化
/*========================================================*/
this.init=function () {
这个。loop()；
};
/*========================================================*/
/*效用函数
/*========================================================*/
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)；};
/*========================================================*/
/*更新加载程序
/*========================================================*/
this.updateLoader=function () {
如果(this.loaded 100) {
这个。上膛=这个。装载机速度；
}否则{
这个。loaded=0；
}
};
/*========================================================*/
/*渲染加载器
/*========================================================*/
this.renderLoader=function () {
这个。CTX。填充样式= # 000 ；
这个。CTX。填充rect(this。装载机。x，this.loader.y，this.loaderWidth，this。装载机高度)；
这个。色相=这个。huestart(这个。装/100)*(这个。色相终-本。huestart)；
var新宽度=(this。装/100)*这个。装载机宽度；
这个。CTX。填充样式= HSLA(这个。色调，100%，40%，1)；
这个。CTX。填充rect(this。装载机。x，this.loader.y，newWidth，this。装载机高度)；
这个。CTX。填充样式= # 222 ；
这个。CTX。填充rect(this。装载机。x，this.loader.y，newWidth，this。装载机高度/2)；
};
/*========================================================*/
/*粒子
/*========================================================*/
这个。粒子=函数(){
这个。x=_这个。装载机。x((_这个。装/100)* _这个。装载机宽度)-这个。兰特(0，1)；
this.y=_this.ch/2 _this.rand(0，_this。装载机高度)-这个。装载机高度/2；
this.vx=(_this.rand(0，4)-2)/100；
this.vy=(_this.rand(0，_this。粒子升力)-_这个。粒子升力* 2)/100；
this.width=_this.rand(1，4)/2；
this.height=_this.rand(1，4)/2；
这个。hue=_这个。色调；
};
这个粒子。原型。更新=函数(I){
this.vx=(_this.rand(0，6)-3)/100；
这个。vy=_这个。重力；
这个。x=这个。VX；
这个。y=这个。vy；
if (this.y _this.ch) {
_this.particles.splice(i，1)；
}
};
这个粒子。原型。render=function(){
_这个。CTX。填充样式= HSLA(这个。 hue ，100%， _this.rand(50，70) %， _this.rand(20，100)/100 )；
_this.ctx.fillRect(this.x，this.y，this.width，this。身高)；
};
这个。创建粒子=function(){
var i=this.particleRate
while (i - ) {
this.particles.push(新这个.粒子());
};
};
这个。更新粒子=函数(){
var I=this。粒子。长度；
while (i - ) {
var p=this。粒子[I]；
p。更新（一);
};
};
这个。渲染粒子=function(){
var I=this。粒子。长度；
while (i - ) {
var p=this。粒子[I]；
p。render()；
};
};/PP/*================================================*/
/*透明画布
/*========================================================*/
this.clearCanvas=function () {
这个。CTX。globalcompositeoperation=“source-over”；
this.ctx.clearRect(0，0，this.cw，this。ch)；
这个。CTX。globalcompositeoperation= lighter ；
};
/*========================================================*/
/*动画循环
/*========================================================*/
this.loop=function () {
var loopIt=function () {
requestAnimationFrame(loopIt，_ this。c)；
_这个。清除画布()；
_这个。创建粒子()；
_这个。update loader()；
_这个。更新粒子()；
_这个。render loader()；
_这个。渲染粒子()；
};
loop it()；
};
};
/*========================================================*/
/*检查画布支持
/*========================================================*/
var isCanvasSupported=function(){
var elem=文档。createelement(“canvas”)；
回归！(elem。获取上下文元素。获取上下文(“2d”)；
};
/*========================================================*/
/*设置请求动画帧
/*========================================================*/
var setupRAF=function () {
var last time=0；
var vendors=[ms ， moz ， webkit ， o ]；
for(var x=0；x厂商。长度！window . requestanimationframex){
窗户。RequestAnimationFrame=window[vendors[x] RequestAnimationFrame ]；
窗户。CancelAnimationFrame=window[vendors[x] CancelAnimationFrame ] window[vendors[x] CancelRequestAnimationFrame ]；
};
如果(!window.requestAnimationFrame) {
窗户。requestanimationframe=function(callback，element) {
var currTime=新日期()。getTime()；
var timeToCall=Math.max(0，16-(当前时间-上次时间))；
var id=窗口。settimeout(function(){ callback(curr time要调用的时间)；}，打电话的时间)；
last time=curr time调用时间；
返回id；
};
};
如果(!window.cancelAnimationFrame) {
窗户。cancelanimationframe=函数(id){
清除超时(id)；
};
};
};
/*========================================================*/
/*定义画布并初始化
/*========================================================*/
if (isCanvasSupported) {
var c=文档。createelement(“canvas”)；
c。宽度=400;
c .高度=100
var cw=c .宽度
var ch=c .高度
文档。身体。appendchild(c)；
var cl=new lightLoader(c，cw，ch)；
setup RAF()；
cl。init()；
}
/脚本
div style= position:absolute；top:0；宽度：100%
div class= footer-banner style= width:728 px；边距：10px自动；颜色：白色
HTML5进度条
请使用支持HTML5的浏览器查看本页/div
/div
/body
/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。