使用原生JS+CSS或HTML5實現簡單的進度條和滑動條效果

前言

我我的很是喜歡js+css的強大表現能力,這也是我喜歡前端開發的緣由之一,後端一般都是在和數據打交道,不少東西都是抽象的數據結構,不直觀也不美觀,而前端着重於界面視圖的渲染以及各類各樣有意思的交互效果,其中像咱們在客戶端中見到的安裝進度條效果以及滑塊拖動效果,使用js+css都可以在頁面中進行模擬,而且方法也並不複雜.我這裏進行了簡單的效果實現,記錄一下以做鞏固.

 

1.進度條效果實現

效果展現:

 

基本思想：

這裏主要使用了CSS3的animation動畫效果,將進度條設置爲一個初始寬度爲0,背景色爲綠色,高度與容器相同的元素,經過animation對其寬度進行動畫過渡,以實現進度條填充的效果.

 

如下爲代碼實現，能夠做爲參考：

html:

<!--外層容器-->
<div id="wrapper">
    <!--進度條容器-->
    <div id="progressbar">
        <!--用來模仿進度條推動效果的進度條元素-->
        <div id="fill"></div>
    </div>
</div>

css:

#wrapper{
    position: relative;
    width:200px;
    height:100px;
    border:1px solid darkgray;
}
#progressbar{
    position: absolute;
    top:50%;
    left:50%;
    margin-left:-90px;
    margin-top:-10px;
    width:180px;
    height:20px;
    border:1px solid darkgray;

}
/*在進度條元素上調用動畫*/
#fill{
    animation: move 2s;
    text-align: center;
    background-color: #6caf00;
}
/*實現元素寬度的過渡動畫效果*/
@keyframes move {
    0%{
        width:0;

    }
    100%{
        width:100%;
    }
}

js:

var progressbar={
    init:function(){
        var fill=document.getElementById('fill');
        var count=0;
    //經過間隔定時器實現百分比文字效果,經過計算CSS動畫持續時間進行間隔設置
        var timer=setInterval(function(e){
            count++;
            fill.innerHTML=count+'%';
            if(count===100) clearInterval(timer);
        },17);
    }
};
progressbar.init();

 

HTML5下的實現：

強大的HTML5提供了一種新的標籤<progress>,只須要經過該標籤+簡單的js，便可以實現進度條滾動的效果。

代碼以下：

HTML

<progress max="100" value="0" id="pg"></progress>

 這個標籤意義很明確，而且屬性只有以上兩個，max表示須要完成的任務量，value是目前完成的任務量。

 

js

 var pg=document.getElementById('pg');
 setInterval(function(e){
      if(pg.value!=100) pg.value++;
      else pg.value=0;
},100);

　　

以上的實現方式不只更加的語義化，同時也極大的簡化了咱們的代碼，而且靈活性更高，因此熟練使用HTML5是很是有必要的！

不過HTML5標籤的瀏覽器兼容性也是咱們須要考慮的一個問題，因此若是網頁需求的兼容性比較高的話，特別是對低版本IE有兼容需求的話，那麼HTML5的標籤就不太適用了。如下爲<progress>的瀏覽器支持狀況。

 

2.滑動條效果實現

效果展現:

 

基本思想：

滑動條其實就是進度條的進階,進度條是自動填充整個容器,滑動條是實現可本身控制的填充效果.

整個滑動條主要分爲三個部分,即滑動條容器,滑塊,填充塊.

在這裏我主要實現了兩個功能:

1.點擊滑動條的任意部分,自動調整滑塊位置並調整填充狀況

2.拖拽滑塊進行填充調整

第一個功能的實現很是的簡單,首先將滑塊設置成絕對定位,而後只須要在滑動條區域內綁定click事件,而後讀取鼠標事件的offsetX屬性,肯定鼠標位置相對於滑動條左側的距離,而後設置滑塊的left來調整滑塊位置以及填充塊的寬度.

第二個功能的實現稍微複雜一點,由於要模擬一個拖拽的效果,這裏使用到了三個鼠標事件mousedown,mousemove,mouseup.

1.當咱們按住滑塊時,觸發mousedown事件,在這個事件處理裏面咱們不須要作太多的事情,只須要修改一個狀態,將滑塊從不容許拖拽的狀態變成容許拖拽.

2.而後觸發mousemove,讓滑塊和填充塊跟隨鼠標移動.

3.當釋放鼠標時,觸發mouseup事件,將滑塊從容許拖拽的狀態變成不容許拖拽.

 

如下爲代碼實現，能夠做爲參考：

html:

<!--外層容器-->
<div id="wrapper">
    <!--填充塊-->
    <div id="fill"></div>
    <!--滑塊-->
    <div id="slider"></div>
</div>

 

css:

#wrapper{
    position: relative;
    width:200px;
    height:20px;
    border:1px solid darkgray;
}
/*將滑塊和填充塊設置成inline-block,保證他們在同一行內*/
#slider{
    position: absolute;
    left:0;
    width:20px;
    height:20px;
    display: inline-block;
    background-color: #af58a8;
    cursor:pointer;
}
#fill{
    display: inline-block;
    width:0;
    height:20px;
    background: #6caf00;
}

 

js:

var slider=(function(){
    init=function(){
        var wrapper=document.getElementById('wrapper');
        var slider=document.getElementById('slider');
        var fill=document.getElementById('fill');
        move(wrapper,slider,fill);
    };
    move=function(dom1,dom2,dom3){
    //drag用來存儲滑塊容許拖拽和不容許拖拽的狀態
        var drag=0;
    //在滑動條上綁定click事件以實現點擊任意位置,自動調整滑塊和填充塊的效果
        dom1.addEventListener('click',function (e) {
            if(e.target===dom2){
            //點擊滑塊自身不作任何事情                
            }else{
                if(e.offsetX>180) {
                    dom2.style.left='180px';
                    dom3.style.width='180px';
                }else if(e.offsetX<20){
                    dom2.style.left='0px';
                    dom3.style.width='0px';
                }else{
                    dom2.style.left=e.offsetX-10+'px';
                    dom3.style.width=e.offsetX-10+'px';
                }
            }
        });
        //修改drag的狀態        
        dom2.addEventListener('mousedown',function(){
            drag=1;
        });
        //釋放按鈕綁定在document上,保證在整個頁面容器裏面任何地方鬆開按鈕都能修改drag的狀態        
        document.addEventListener('mouseup',function(){
            drag=0;
        });
        // 使滑塊和填充塊跟隨移動,這裏使用的pageX,須要計算和視窗左側的距離而不是和滑動塊左側的距離       
        dom1.addEventListener('mousemove',function(e){
            if(drag==1){
                if(e.pageX>189) {
                    dom2.style.left='180px';
                    dom3.style.width='180px';
                }else if(e.pageX<29){
                    dom2.style.left='0px';
                    dom3.style.width='0px';
                }else{
                    dom2.style.left=e.pageX-19+'px';
                    dom3.style.width=e.pageX-19+'px';
                }
            }
        });

    };
    return {
        init:init
    }
})();
slider.init();

 

HTML5下的實現：

既然進度條在HTML5下有了專門的標籤，那麼滑動條呢？通過查詢發現，雖然沒有設置滑動條的標籤，可是HTML5在input的type屬性中新增了一個值range，正是咱們須要的滑動條。可見input並不侷限於提供輸入框，它可以實現的控件很是的豐富，有不少控件都是能夠在input中找到的。

該控件效果以下：

 

代碼以下：

html

<input type="range" name="points" min="1" max="10" />

甚至都不須要JS來控制，只須要一行html代碼，便可實現完整的滑動條效果。

該屬性具體的使用教程參考以下：

range屬性的使用方法：http://www.w3school.com.cn/html5/html_5_form_input_types.asp

js中對range元素如何進行操做：http://www.w3school.com.cn/jsref/dom_obj_range.asp