jquery自定義進度條與h5原生進度條

 

介紹一款自定義的進度條 簡單看看實現效果：

http://www.sulishibaobei.com/progress/index1.html --js自定義

http://www.sulishibaobei.com/progress/index.html --h5原生

 

 

  <div class="box-nine">
        <div class="progress"> <!--一整條進度條-->
            <div class="progress-bar"></div> <!--進度-->
            <div class="progress-circle"></div><!--控制點-->
        </div>
        <input type="text" value=""><!--顯示進度值-->
    </div>

 簡單的寫一下樣式

    .progress{
           width:200px;
           height:6px;
           background: #cccccc;
           border-radius: 6px;
           position: relative;
           display: inline-block;
           cursor: pointer;
       }
       .progress .progress-bar{
           width:100px;
           height: 6px;
           position: absolute;
           background:red;
           border-radius: 6px;
           top:0;
       }
       .progress .progress-circle{
           width:14px;
           height:14px;
           background: #ffffff;
           border:1px solid #ccc;
           box-shadow: 0 0 5px 0  #000 0.27;
           border-radius: 50%;
           position: absolute;
           top:-4px;
           cursor: pointer;
           left:98px;
       }
       input[type='text']{
           width:47px;
           height:30px;
           line-height: 30px;
       }

 看下簡單的靜態頁面效果

接下來看實現

第一步：引入jquery

<script type="text/javascript" src="jquery.js"></script>

第二部：jquery

var lastX, NewX, that, thewidth = 0;
				var auto = false;//控制是否可以拖動的; false表示不能拖動
				$('.box-nine').on('mousedown', '.progress-circle', function(e) {
					lastX = e.clientX;  //鼠標按下時距離瀏覽器的x軸距離
					e.preventDefault(); //阻止默認事件
					that = $(this);  //保存當前this
					thewidth = that.prev().width() || $(".progress-bar").width();  // 獲取當前進度的寬度，也就是紅色條的寬度 
					auto = true;  //鼠標按下的時候設置為true，允許拖動
				})
				$(document).on('mousemove', function (e) {  //記住，這里一定要綁定在document上，防止拖動過快造成問題
					if (auto) {
						e.preventDefault();
						NewX = e.clientX; //拖動后，重新獲取鼠標距離瀏覽器的x軸距離
						var mcs = NewX - lastX; //由mcs的值大小確定鼠標是向左滑動還是右滑動;
						var differ = $(".progress").width() - $(".progress-circle").width(); //圓圈能拖動的最大距離 紅色進度條的最大寬度就是整個進度條200px，而圓圈能滑動的最大距離要減去本身的寬度
						if (mcs > 0) {//判斷左滑還是右滑
							that.prev().css('width', mcs + thewidth < differ ? mcs + thewidth : $(".progress").width()); //每拖動一次，都要加上當前紅色條的寬度    紅色條寬度=每次的鼠標差+ 上一次紅色條寬度
						    that.css('left', mcs + thewidth < differ ? mcs + thewidth : differ);  
						} else {
							that.prev().css('width', thewidth + mcs - that.width() > 0 ? thewidth + mcs - that.width() : 0);
							that.css('left', thewidth + mcs - that.width() > 0 ? thewidth + mcs - that.width() : 0);
						}
						var val = that.prev().width();
						that.parents('.box-nine').find('input').val(Math.ceil(val / 2));//實時將值顯示在Input框   這里是模擬音量 0-100的值
					}
				})
				$(document).on('mouseup', function(e) {
					if(auto) {
						auto = false;//鼠標松開不允許拖動
					}
				})

 $(".box-nine").on('click', '.progress', function(e) { //點擊進度條時，進度的變化
                    lastX = e.clientX;
                    var offsetX = $(this).offset().left;
                    $(this).find('.progress-bar').css('width', lastX - offsetX>$(this).width()?$(this).width():lastX-offsetX);
 $(this).find('.progress-circle').css('left', lastX - offsetX>$(this).width()- $(this).find('.progress-circle').width()?$(this).width()- $(this).find('.progress-circle').width():lastX-offsetX);
 var val =$(this).find('.progress-bar').width();
 $(this).parents('.box-nine').find('input').val(Math.ceil(val / 2));
 })

1.將this存起來是防止頁面不止一個進度條，且class都是同一份時，互不干擾；

 

下面來介紹html5的原生進度條，也做成上面一樣的樣式；

 <div class="box-one" style="position:relative;margin-top:10px;">
       <progress value="" max="100"> </progress> <!--h5 進度條-->
       <div class="progress-circle1"></div>
       <input type="text" value=""><!--顯示進度值-->
    </div>

 progress{
           background: #cccccc;
           width:202px;
           height:6px;
           border:1px solid #ddd;
           border-radius: 6px;
           cursor: pointer;
           position: relative;
           margin-right:10px;
           
       }
       progress::-moz-progress-bar {  background: #ccc}
       progress::-webkit-progress-value { 
           background: red;
           height:6px;
           border-radius: 6px 0 0 6px;
           position: absolute; 
           top:-1px;
       }
       progress::-webkit-progress-bar { 
           background: #ccc
       }
       .progress-circle1{
           width:14px;
           height:14px;
           background: #ffffff;
           border:1px solid #ccc;
           box-shadow: 0 0 5px 0  #000 0.27;
           border-radius: 50%;
           position: absolute;
           top:15px;
           cursor: pointer;
           left:0px;
       }

此樣式不兼容谷歌喲；通過手動修改progress的樣式

 var lastX,offset, thats,thewidth=0;
        var auto=false;
        $(".box-one").on('mousedown','.progress-circle1',function(e){
             lastX=e.clientX;
             e.preventDefault();
              thats=$(this);
              thewidth=thats.prev().val() || $("progress").val();
              auto=true;
        })
        $(document).on('mousemove',function(e){
            if(auto){
                e.preventDefault();
                newX=e.clientX;
                var mcs=newX-lastX;
                var differ=thats.prev().width()-thats.width();
                if(mcs>0){
                     thats.prev().val(thewidth*2+mcs>$("progress").width()?$("progress").width()/2:(thewidth*2+mcs)/2);
                     thats.css('left',mcs+thewidth*2<differ?mcs+thewidth*2:differ );
                }else{
                 thats.prev().val( thewidth+ mcs/2>0?thewidth+ mcs/2:0);
                thats.css('left',thewidth*2 + mcs - thats.width()> 0 ? thewidth*2 + mcs - thats.width():0)
                }
                var val = thats.prev().val() || $("progress").val();
                thats.parents('.box-one').find('input').val(Math.ceil(val ));//實時將值顯示在Input框   這里是模擬音量 0-100的值
              
            }
        })
        $(document).on('mouseup', function(e) {
            if(auto) {
                auto = false;//鼠標松開不允許拖動
            }
        })
        $(".box-one").on('click', 'progress', function (e) {
                that=$(this);
                lastX = e.clientX;
                offset = $(this).offset().left;
                that.parent().find('.progress-circle1').css('left', lastX - offset>that.width() ? that.width()-$(".progress-circle1").width():lastX - offset);
                that.val((lastX - offset)/2);
                that.parent().find('input').val(Math.ceil((lastX - offset)/2));
        })

詳細代碼：https://github.com/sulishibaobei/progress/tree/master