网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 html5进度条特效
内容
    请使用支持html5的浏览器查看本特效
    代码如下:
    <!doctype html>
    <html>
    <head>
    <meta charset='utf-8'>
    <title>html5有特色的进度条</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进度条
    请使用支持html5的浏览器查看本页</div>
    </div>
    </body>
    </html>
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/14 13:30:49