服務項目:網站建設、仿站、程序開發、APP開發設計、移動網站開發設計、企業網站設計、電子商務網站開發、網站維護、網站推廣、UX/UI 、HTML5、CSS3、JS / Jquery ...
          四川???萍加邢薰?></a></div>
                    <div   id=四川???萍加邢薰? title=
          四川???萍加邢薰?(開發設計官網)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
          主站蜘蛛池模板: 无遮挡边吃摸边吃奶边做| 美国式禁忌5太大了| 欧美日本免费观看αv片| 国产精品中文字幕在线观看| 中文字幕专区高清在线观看| 欧美午夜精品久久久久免费视| 国产内射999视频一区| 一本色道久久综合一区| 欧美特黄高清免费观看的| 国产日产欧洲无码视频| 中文字幕日韩wm二在线看| 狠狠爱天天综合色欲网| 国语精品视频在线观看不卡| 亚洲中文字幕伊人久久无码| 色欲AV无码一区二区三区| 大香人蕉免费视频75| 久久久久久国产精品免费免费| 男人添女人下部全视频| 国产亚洲真人做受在线观看 | 亚洲va欧美va天堂v国产综合| 这里只有精品视频在线| 国产精品视频永久免费播放| 久久人午夜亚洲精品无码区| 男男暴菊gay无套网站| 国产精品jizz在线观看直播| jizz在线免费观看| 最近免费观看高清韩国日本大全| 另类孕交videosgratis| 800av凹凸视频在线观看| 成人中文精品3d动漫在线| 久久精品国产69国产精品亚洲| 精品日韩在线视频| 国产精品你懂得| 中文字幕一区在线观看| 曰批免费视频播放免费| 北条麻妃jul一773在线看| 污视频免费网站| 成人午夜精品久久久久久久小说| 久久精品麻豆日日躁夜夜躁| 男人的天堂一区二区视频在线观看| 国产男女插插一级|