标签：process 注意 htm position auto ext code 两种方法 anim
程序效果如下
实现进度条动画主要有两种方法：（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
标签：process 注意 htm position auto ext code 两种方法 anim
原文地址：https://www.cnblogs.com/zhaogaojian/p/10562374.html
