HTML5进度条特效
2018-05-04 11页 doc 31KB 18阅读
is_348501
暂无简介
举报
HTML5进度条特效HTML5进度条特效
?精品文档?
HTML5进度条特效
请使用支持HTML5的浏览器查看本特效
代码如下:
<!DOCTYPE html
<html
<head
<meta charset=‘UTF-8’
<titleHTML5有特色的进度条</title
<base target=“_blank” /
<style
body {
background: #111;
color:White;
}
a{color:White;}
canvas {...
HTML5进度条特效
?精品文档?
HTML5进度条特效
请使用支持HTML5的浏览器查看本特效
代码如下:
<!DOCTYPE html
<html
<head
<meta charset=‘UTF-8’
<titleHTML5有特色的进度条</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;
1 / 13
?精品文档?
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;
2 / 13
?精品文档?
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();
};
3 / 13
?精品文档?
/*========================================================*/
/* 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;
4 / 13
?精品文档?
} 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’;
5 / 13
?精品文档?
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;
};
6 / 13
?精品文档?
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;
7 / 13
?精品文档?
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’;
8 / 13
?精品文档?
};
/*===========================================
=============*/
/* 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();
};
};
9 / 13
?精品文档?
/*========================================================*/
/* 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
10 / 13
?精品文档?
&& !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);
11 / 13
?精品文档?
};
};
};
/*===========================================
=============*/
/* 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
12 / 13
?精品文档?
<div style=“position:absolute; top: 0;width:100%”
<div class=“footer-banner” style=“width:728px;margin:10px auto;color:White”
HTML5进度条
请使用支持HTML5的浏览器查看本页</div
</div
</body
</html
13 / 13
/
本文档为【HTML5进度条特效】，请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑，
图片更改请在作品中右键图片并更换，文字修改请直接点击文字进行修改，也可以新增和删除文档中的内容。
[版权声明] 本站所有资料为用户分享产生，若发现您的权利被侵害，请联系客服邮件isharekefu@iask.cn，我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权，请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传，仅限个人学习分享使用，禁止用于任何广告和商用目的。
相关资料
- 山东省工伤保险条例实施细则
- 台大文史哲学报目录（1－65）
- 造林绿化工程人工造林施工组织设计方案
- 疯狂购物车-互动游戏 V2
- 二盖一版的bws2001中文版
- 南京艺术品市场分析及关于画廊发展的报告
- 模拟电子技术基础简明教程 第三版
- 《助产士的角色》ppt课件
- 关于加强保密工作的意见和建议
- 2022年重庆文理学院事业单位招考聘用49人模拟考试练习卷及答案(第3卷）
- 中医师带徒年度考核表
- 吊篮安装安全技术交底
- 热爱劳动传承美德课件
- 南工好室友—室友关系改善小组小组计划书
- 北师大版七年级生物_血液ppt课件
- 尼可地尔联合辅酶Q10治疗慢性心力衰竭的临床效果
- 趣味故事
- 高考英语完形填空高频词汇419个汇总
- ANSYSMawell2D求解齿槽转矩的几种方法
- 鸭脖加盟合同
热门搜索
- 诚实守信
- 【doc】大学生学习动机激发的社会性思考
- 昆明理工大学 电力系统稳态分析 陈珩 中国电力出版社 第3版02复习题
- 毕业论文——上海迎天实业有限公司洁士达洗衣液促销方案设计
- 《广东省公路水运工程工地试验室管理办法》实施意见
- 环境影响评价报告公示：盘龙路（荷叶坝路-云海大道）新建工程环评报告
- 反应温度对华北C4液化气芳构化的影响
- 2022年小学一年级第一学期语文、数学期末无纸笔化检测题（各一套）
- 小学数学西师版《观察物体》
- 彝族舞曲（五线谱+六线谱）
- 袁珂
- 微量注射泵公式
- 绍兴地接讲解部分内容(沿途导游词)
- 我的邻居李奶奶_初三记叙文作文800字
- 诚实守信
- 【doc】大学生学习动机激发的社会性思考
- 昆明理工大学 电力系统稳态分析 陈珩 中国电力出版社 第3版02复习题
- 毕业论文——上海迎天实业有限公司洁士达洗衣液促销方案设计
- 《广东省公路水运工程工地试验室管理办法》实施意见
- 环境影响评价报告公示：盘龙路（荷叶坝路-云海大道）新建工程环评报告
- 反应温度对华北C4液化气芳构化的影响
- 2022年小学一年级第一学期语文、数学期末无纸笔化检测题（各一套）
- 小学数学西师版《观察物体》
- 彝族舞曲（五线谱+六线谱）
- 袁珂
- 微量注射泵公式
- 绍兴地接讲解部分内容(沿途导游词)
- 我的邻居李奶奶_初三记叙文作文800字
你可能还喜欢
- 《社会主义核心价值体系融入小学教育全过程》研究开题报告
- 高二作文小说：翅膀
- 农产品收购发票
- 江苏竣工验收备案表
- 滚筒筛分机安全操作规程
- 年广州版七年级下册英语课文与翻译
- 采松蘑菇_二年级记叙文作文450字
- 便民市场管理办法
- 2012国家留学基金委寒假班模拟考试 听力
- 一年级上册科学实验报告单
- 人教版三年级上册数学题库大全
- 形容爱情很炙热的词 (4页)
- 山西省历年养老保险缴费基数表
- 二氧化碳致裂器安全技术要求
- 2014年10月公务员及事业人员津补贴标准
- 2015考研英语阅读理解精读P6—理学
- 平行合并和逐级合并财务报表
- 平行合并和逐级合并财务报表
- 平行合并和逐级合并财务报表
- 平行合并和逐级合并财务报表
浙公网安备 33021202002483