实现拖拽进度条

来源：互联网发布：苏伊士运河运量数据图编辑：程序博客网时间：2024/05/11 10:56
用到了拖拽功能
<style>        .wrap{            width:500px;            border: 1px solid;            padding: 20px;        }        .process{            position: relative;            width:80%;            height: 30px;            background-color: #dddddd;            border-radius: 2px;        }        .process-bar{            width: 0%;            height: 30px;            background-color: #187aab;            border-radius: 2px;        }        .bar{            top: -5px;            left: -5px;            position: absolute;            width: 10px;            height: 40px;            border-radius: 2px;            background-color: #91cdea;            display: inline-block;        }    </style></head><body><div class="wrap">    <div class="process">        <div class="process-bar"></div>        <span class="bar" id="mybar"></span>    </div></div><script src="../js/libs/jquery-1.11.3.min.js"></script><script>  var isDrag = false;  var fullwidth = $(".process").width();  var mouseX,left;  $("#mybar").bind("mousedown", function (e) {      isDrag = true;      mouseX = e.clientX;      left = $(this).position().left;      console.log(mouseX+" "+left);      return false;  });    $(document).bind("mousemove", function (e) {        if(isDrag){            var mX = e.clientX;            var l = mX-mouseX+left;            console.log(mX+" "+l);            if(l<-5){                l=-5;            }else if(l>fullwidth-5){                l=fullwidth-5;            }            $("#mybar").css('left',l);            var p = Math.round((l+5)*100/fullwidth);            $(".process-bar").css('width',p+'%');        }    });    $(document).bind("mouseup", function () {        isDrag = false;        return false;    })    //点击 到点击处 $(".process").click(function (e) {    if(!isDrag){        var eX = e.clientX;        var l = $("#mybar").offset().left;        var l1 = $("#mybar").position().left;        var ox = eX-l;        var w = $(".process-bar").width();        var p = (w+ox)*100/fullwidth;        $(".process-bar").css('width',p+'%');        $("#mybar").css('left',l1+ox);        console.log(eX+" "+l+" "+w+" "+p);    }})</script>
效果
0 0