JGUI源碼：實現簡單進度條(19)

時間 2019-12-12

標籤 jgui 源碼實現簡單進度简体版

原文原文鏈接

程序效果以下javascript

實現進度條動畫主要有兩種方法：（1）使用緩動，（2）使用Jquery Animate,本文使用第二種方法，先實現代碼，後續進行控件封裝html

<style>
      .jgui-processbar .loading
      {
        background-color: #22B581;
        height: 100%;
        width:0%;
        color:white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>這是進度條演示代碼</div>
    <script type="text/javascript">
      $(function() {
        showProcess1();
        showProcess2();
      });
      function showProcess1()
      {
        $('#processbar1 .loading').animate({'width':'100%'},500);
      }
      function showProcess2()
      {
        $('#processbar2 .loading').animate(
          {
            'width':'100%'},
            {
              step:function(now,fx){
                if(fx.prop=="width"){
                  var pos=Math.round(fx.pos*100);
                  $('#processbar2 .loading').html(pos+'%');
                }
            },
            duration:1000});
      }
    </script>
    <div class="jgui-processbar" id="processbar1"  style="position:relative;width:320px;height:20px;border: #12A571 1px solid">
     <div class="loading"></div>
    </div>
    <div style="margin:10px">
    </div>
    <div class="jgui-processbar" id="processbar2"  style="position:relative;width:320px;height:20px;border: #12A571 1px solid">
      <div class="loading"></div>
     </div>

須要注意的是，div loading須要設置高度100%，由於div 默認的高度是auto，若是沒有內容的話高度爲0.
第一種方法單純顯示動畫，第二種方法會更新進度到界面上。java

寫好後，發現loading寬度比父div寬度要寬，加上relative屬性便可解決動畫

 <style>
      .jgui-processbar
      {
        position: relative;
      }
      .jgui-processbar .loading
      {
        background-color: #22B581;
        height: 100%;
        width:0%;
        color:white;
        text-align: center;
        position: relative;
      }
    </style>