css3实现进度条的模拟

最新推荐文章于 2023-05-09 09:40:07 发布

weixin_34288121

最新推荐文章于 2023-05-09 09:40:07 发布

阅读量152

点赞数

文章标签： javascript ViewUI

两种进度条动画的实现：

　　1、css3，但IE9-不支持。

　　2、js动画，兼容性好，但没有css3实现的顺畅

Demo：

<html>
   <head>
       <title>progress</title>
       <script type="text/javascript" src="../jQuery1.7.js"></script>
       <style type="text/css">
           body{
               margin: 0;
           }
           #progress{
               height: 2px;
               background: #b91f1f;

　　　　　　/*定义动画完成时进度条的消失500ms内完成，而不是直接消失*/
               transition: opacity 500ms linear;
           }
           #progress{

　　　　　　/*调用下面定义的progress动画，规定动画3s内完成*/
               -webkit-animation: progress 3s;
               animation: progress 3s;
           }
           #progress.done{
               opacity: 0;
           }
           @-webkit-keyframes progress{
               0%{
                   width: 0px;
               }
               100%{
                   width: 100%;
               }
           }
           @keyframes progress{
               0%{
                   width: 0px;
               }
               100%{
                   width: 100%;
               }
           }
       </style>
   </head>
   <body>
       <div id="progress">

       </div>
       <script type="text/javascript">

　　　　// 第一次见这种使用方式，定义一个对象，并为其属性值定义动画
           $( {property : 0} ).animate( {property : 100}, {
               duration : 3000,
               step : function(){
                   var percentage = Math.round( this.property );
                   $( "#progress" ).css( "width", percentage + "%" );
                   if( percentage == 100 ){
                       $( "#progress" ).addClass( "done" );
                   }
               }
           } );
       </script>
   </body>
</html>