进度条实现的三种方式

一、鉴于我自己也是个初出茅庐的家伙，本文也只是作为自己学习中的一些实践吧！有什么好的想法也希望能和大家一起讨论学习~下面我将采用三种不同的方式来展示进度条。

二、js方式实现进度条

1、知识储备：本节中我们需要学习几个小知识，看起来内容好像很多，其实很少的哟，我们学习了js基础就会对这些概念很熟悉了。

（1）getElementsByClassName：根据类名来查找元素

（2）setInterval()方法和clearInterval()方法

（3）Math.floor()方法

（4）innerHTML

2、实现的思路：在基本的布局结束后，我们来思考一下，应该怎么样才能做出动态的进度条的效果呢？我首先想到的就是setInterval()，可能是因为这个我用的比较多~哈哈，总之，每隔固定的时间即使红色的div宽度增加。

3、上代码：

（1）js部分：

window.onload=function(){
        var a2_1=document.getElementsByClassName("a2_1")[0];
        var a2_2=document.getElementsByClassName("a2_2")[0].style.width;
        var wid=setInterval(dodo,20);
        function dodo(){
            a2_2++;
            var s1=Math.floor((a2_2/200)*100)+"%";
            a2_1.innerHTML=s1;
            document.getElementsByClassName("a2_2")[0].style.width=a2_2+"px";
            a2_1.style.width=a2_2+"px";
            while(a2_2>200){
                clearInterval(wid);
            }
        }    
    }

（2）布局部分：

<div class="a2">
    <div class="a2_2"></div>
    <div class="a2_1"></div>
</div>

（3）css部分：

.a2{
        height:14px;
        width:200px;
        position:relative;
        margin: 10px 0px;
        font-size: 12px;
        border:1px solid #ccc; 
    }
.a2 .a2_1{ text-align: center;}
.a2 div{
            height:14px;            
        　　position:absolute;
        }
.a2 .a2_2{
            background-color:red;
        }

4、效果图：（抱歉，动态效果图我还不会做..后续补充只能大家自己运行看看了）

三、jQuery方式实现进度条

1、知识储备：对jQuery稍有一些了解的话就一定听说过jQuery中的animate方法了，只是听过没有用过？没关系，我之前也没怎么用过。小百一下发现资料好多，听到动画就觉得很难，没有心情看下去了？没关系，我也这么觉得，所以其他我们统统不看，只需要知道两点：一是使用animate方法可以制作动画的效果；二是animate方法怎么用。便于大家理解，我们来看一个小例子~

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript" src="jquery.min.js"></script>
 6 <script type="text/javascript">
 7     $(function(){
 8         $(".try").animate({width:"600px"},3000);
 9     })
10 </script>
11     <title></title>
12     <style type="text/css">
13         .try{
14             width:100px;
15             height:100px;
16             background-color:yellow;
17             border:1px solid #ccc;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="try"></div>
23 </body>
24 </html>

是不是觉得代码仍旧很长呢，其实大家只看我用金黄色标记的三行就可以了。首先我们设置一个元素，并把它设成定宽，在jQuery中我们则为它设置了不一样的宽度！这里也是制作动画效果的重点，最开始的某一个属性和用animate设置的属性值一定要不一样，这样才能看出来有动画效果的哟~看到这里我想一定有很多小朋友和我一样，想要试试改变一下背景颜色吧，这样是不是就能做出淡变的效果呢？听起来很酷的样子~于是我修改了如下js代码：

$(function(){
    $(".try").animate({backgroundColor:"red"},3000);
})

猜猜结果会怎么样呢？没错，我失败了！！！这时候我也迷茫了，不是说好会有动画效果的么...骗纸.....于是再次去w3c网站看了一遍，有明确的说，animate只对数值可以产生动画效果~（不可粗心大意）。同时，你也可以去网上小百一下，看看animate到底可以设置哪些css属性！

ps:3000是规定动画在多长时间内完成，没记错的话单位应该是毫秒。

呐，到此为止，我们已经学习了animate的简单用法，其他的暂时都不需要考虑，准备实现效果！

2、在最开始我们就讲过了基本的布局思想，此处不再赘述。上一小节的例子也基本实现了进度条的动画效果。下面我们来看一下完整的代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <script type="text/javascript" src="jquery.min.js"></script>
 6 <script type="text/javascript">
 7     $(function(){
 8         $(".b").animate({width:"20%"},600);
 9         $(".c").animate({width:"50%"},1500);
10         $(".d").animate({width:"80%"},2400);
11         $(".e").animate({width:"100%"},3000);
12     });
13 </script>
14     <title>进度条</title>
15     <style type="text/css">
16         .a1{
17             height:14px;
18             width:200px;
19             position:relative;
20             margin: 10px 0px;
21             font-size: 12px;
22             border:1px solid #ccc; 
23         }
24         .a1 .a1_1{
25             text-align: center;
26         }
27         .a1 div{
28             height:14px;            
29             position:absolute;
30         }
31         .a1 .a1_2{
32             background-color:red;
33         }
34     </style>
35 </head>
36 <body>
37     <h2>实现进度条的几种方式</h2>
38     <div>
39         <div style="width:500px;margin:0 auto;">
40             <h4>实现方式一</h4>
41             <div class="a1">
42                 <div class="a1_2 b"></div>
43                 <div class="a1_1 b">20%</div>
44             </div>
45             <div class="a1">
46                 <div class="a1_2 c"></div>
47                 <div class="a1_1 c">50%</div>
48             </div>
49             <div class="a1">
50                 <div class="a1_2 d"></div>
51                 <div class="a1_1 d">80%</div>
52             </div>
53             <div class="a1">
54                 <div class="a1_2 e"></div>
55                 <div class="a1_1 e">100%</div>
56             </div>
57         </div>
58     </div>
59 </body>
60 </html>

3、效果图：

嗯，贴完了代码突然发现我没什么可解释的了...思路我们已经清楚了，代码中也没有难理解的部分。呐，就这样喽~

四、css3方式实现进度条

1、知识储备：平时工作的时候用到css3的时候也只限于阴影，圆角等。由于兼容性的问题，动画我基本用不到，so~我也是新学哒~这一节我们也只需要了解两个概念：一是keyframes；二是animation属性。下面我们大致讲解一下：

（1）keyframes：对于这个东东我还是比较陌生，据说玩儿flash的小朋友们都比较熟悉，那没试过flash的陀螺们该怎么办呢？不管它，我们知道它叫“关键帧”就可以了。没有太高深的知识，我们用它来给动画的每一帧定状态，例如，第一帧宽度是1，第二帧宽度是2....etc.再通俗一点儿的话，如果我们规定在一分钟内完成从冰箱里拿出水果沙拉的这个过程，首先第一步：打开冰箱门；第二步：拿出沙拉；第三步：关上冰箱门。两个道理神似，稍微动脑领会一下~当然，我是这么想的....（有没有道理的还要你们自己思考的哟~），下面来个小例子：

@-webkit-keyframes 'zy' {
         0% {
           width:0%;
            }
         50% {
             width:50%;
             }
    　　100% {
              width:100%;
             }
}

ps：我用的chrome。

根据上面的例子我们看到我只写了三个状态，分别是0%，50%，100%。那是不是只能写这三个状态呢？不是哦！你从0%写到100%也是可以的。当动画只有0%,100%两个状态时，我们可以使用from和to来代替，就像下面这样：

@-webkit-keyframes 'zy' {//这货是什么
             from {
                width:0%;
             }
            to {
              width:100%;
             }
        }

呐，我落下了一个概念：就是例子中的红色标注。这个是动画的名称，当定义动画的时候，你需要为它起个名字，名字的用处稍后将为你解答！

（2）animation（动画）：在第三节我们学过一个jQuery中的动画方法animate（），虽然长得很像，但是不要混为一谈哦~一定要分清楚！

只讲理论的话还是会有一些迷糊，我们来看个例子熟悉一下它们的用法：

.a2 .a2_2{
            -webkit-animation-name:'zy';//调用名称为'zy'的动画
            -webkit-animation-duration: 3s;//设置动画持续时间为3秒
            -webkit-animation-timing-function: linear;//匀速
            -webkit-animation-delay: 2s;//动画延迟2s开始播放
        }
        @-webkit-keyframes 'zy' {//定义一个动画，宽度从0到100%的过渡
             from {
                width:0%;
             }
            to {
              width:100%;
             }
        }

其实上面这段就是我们实现进度条的核心代码了。它的html结构如下：

<div style="width:500px;margin:0 auto;">
    <h4>实现方式二</h4>
    <div class="a2">
        <div class="a2_2"></div>
        <div class="a2_1">20%</div>
    </div>
</div>

其它的布局思想均与第三节相同，利用relative和absolute定位。

2、效果图：大家一定要自己动手试试，没做之前我也觉得很难的样子，一点点的研究发现很有趣哟~

五、其实一定有小朋友已经发现了破绽，我只是实现了大致的效果，可是在实际应用中貌似毫无用处的样子。说了这么多其实我有时候也不知道自己说的有咩有道理，毕竟我现在也是个小白，我只是把自己亲身试验过的写出来，后台我不是很了解，后台怎样传过来数据，然后根据数据控制进度条的位置。我也就是大概提供一下思路啦，加油~

posted on 2014-10-27 17:06 天株阅读(1939) 评论(0) 收藏举报

刷新页面返回顶部

天株

进度条实现的三种方式

导航

公告