服務項目:網站建設、仿站、程序開發、APP開發設計、移動網站開發設計、企業網站設計、電子商務網站開發、網站維護、網站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
          四川浚浚科技有限公司
          四川浚浚科技有限公司 (開發設計官網)TEL : 15308000360 / QQ : 38585404
          深入挖掘用戶需求
          成就品質用戶體驗

          您的位置:首頁 > 技術經驗 > 前端開發 > 正文

          HTML5進度條特效
          技術支持服務電話:15308000360 【7x24提供運維服務,解決各類系統/軟硬件疑難技術問題】

          這篇文章主要介紹了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>
          



          上一篇:HTML 標簽解釋大全
          下一篇:一個不錯的html 打印代碼支持翻頁

          相關熱詞搜索:html5
          主站蜘蛛池模板: 狼色精品人妻在线视频免费| 丁香伊人五月综合激激激| 精品无码一区二区三区亚洲桃色| 国产精品自在线拍国产手机版| 久久久无码精品亚洲日韩蜜臀浪潮| 永久在线毛片免费观看| 国产三级精品三级在线专区| 777奇米四色| 恸哭の女教师大桥未久| 伊人色综合九久久天天蜜桃| chinese熟妇与小伙子mature| 日韩欧美综合在线| 伊人久久综合谁合综合久久| 麻豆视频一区二区三区| 国色天香网在线| 丰满人妻一区二区三区视频53| 欧美性色一级在线观看| 公天天吃我奶躁我的在线观看 | 性欧美激情videos| 性生活视频网址| 成年女人免费碰碰视频| 日韩欧美综合在线二区三区| 国产成人精品A视频一区| eeuss影院www在线观看免费 | 亚洲一区二区三区国产精品无码| 精品人人妻人人澡人人爽人人 | 乱子伦一级在线观看高清| 福利网站在线观看| 国产偷亚洲偷欧美偷精品| 69影院毛片免费观看视频在线| 成人免费乱码大片a毛片| 久久精品国产免费观看三人同眠| 欧美精品香蕉在线观看网| 动漫精品第一区二区三区| 青青青爽在线视频观看| 国产精品国产三级国产AV′ | 男女做www免费高清视频| 国产亚洲福利一区二区免费看 | 亚洲精品欧美精品日韩精品| 给我个免费看片bd| 国产亚洲精品第一综合|