Jquery實現可拖動進度條demo

標籤：res   實現原理   demo   als   sem   query   精度   margin   pointer   

html

　　　　<div class="progress">            <div class="progress_bg">                <div class="progress_bar"></div>            </div>            <div class="progress_btn"></div>            <div class="text">0%</div>        </div>

css

　　　　 .progress{position: relative; width:300px;margin:100px auto;}        .progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}        .progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}        .progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff;         left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}        .progress_btn:hover{border-color:#F7B824;}

js

　　　　$(function(){                var tag = false,ox = 0,left = 0,bgleft = 0;                $(‘.progress_btn‘).mousedown(function(e) {                    ox = e.pageX - left;                    tag = true;                });                $(document).mouseup(function() {                    tag = false;                });                $(‘.progress‘).mousemove(function(e) {//滑鼠移動                    if (tag) {                        left = e.pageX - ox;                        if (left <= 0) {                            left = 0;                        }else if (left > 300) {                            left = 300;                        }                        $(‘.progress_btn‘).css(‘left‘, left);                        $(‘.progress_bar‘).width(left);                        $(‘.text‘).html(parseInt((left/300)*100) + ‘%‘);                    }                });                $(‘.progress_bg‘).click(function(e) {//滑鼠點擊                    if (!tag) {                        bgleft = $(‘.progress_bg‘).offset().left;                        left = e.pageX - bgleft;                        if (left <= 0) {                            left = 0;                        }else if (left > 300) {                            left = 300;                        }                        $(‘.progress_btn‘).css(‘left‘, left);                        $(‘.progress_bar‘).animate({width:left},300);                        $(‘.text‘).html(parseInt((left/300)*100) + ‘%‘);                    }                });            });

 

實現原理

　　首先是用mousedown()滑鼠按下事件儲存一個狀態值，mouseup()滑鼠抬起事件取消該狀態，再同時配合mousemove()滑鼠移動事件，實現按住拖動的效果。

在滑鼠移動的同時去改變精度條的長度和按鈕的相對左部的距離。

　　然後就是距離的計算，主要利用的就是pageX() 屬性。pageX是滑鼠指標相對於文檔的左邊緣的位置。在滑鼠按下是就記錄相對位置，在滑鼠移動後就可求出滑鼠移動的距離。從而改變按鈕位置和進度條長度。

　　

 

Jquery實現可拖動進度條demo