JGUI源码：实现简单进度条(19)

程序效果如下

实现进度条动画主要有两种方法：（1）使用缓动，（2）使用Jquery Animate,本文使用第二种方法，先实现代码，后续进行控件封装

<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.
第一种方法单纯显示动画，第二种方法会更新进度到界面上。

写好后，发现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>

 

界面演示：www.jgui.com

 

posted @ 2019-03-20 00:04  zhaogaojian  阅读(372)  评论(0)  编辑  收藏  举报