jquery可拖拽进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Title</title>
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

    <style>
        *{
            margin: 0;
            padding:0;
        }
        .box{
            margin:100px;
            width: 600px;
            height: 30px;
            overflow: hidden;
            cursor: pointer;
            background-color: #000;
            padding:0 10px;
            box-sizing:border-box;
        }
        .bar{
            width:100%;
            height: 4px;
            background:rgba(255,255,255,0.5);
            margin-top:12px ;
        }
        .line{
            width:100px;
            height:100%;
            background:rgb(255,255,255);
            position: relative;
        }
        .dot{
            width:10px;
            height:10px;
            border-radius:50%;
            background:rgb(255,255,255);
            position: absolute;
            right: -4px;
            top:-3px;
        }


    </style>
    <script src="JDT.js"></script>

</head>
<body>
<div style="background:red;">
    <div class="box">
        <div class="bar">
            <div class="line">
                <div class="dot"></div>
            </div>
        </div>
    </div>

</div>

    <script>
        function fn(bar,line){
            var bar = "."+bar;  //进度条背景
            var line = "."+line;  //进度条前景
            var statu = false;  //设置一个监控变量,监控鼠标是否按下

            $(bar).mousedown(function (e) {
                ev(e);  //当鼠标按下时可监听此时的点击横坐标
            });

            $(document).mouseup(function () {
                statu = false;  //当鼠标松开时 将监控变量设置为false,表示不可执行鼠标移动事件 mousemove
            });

            //执行鼠标移动事件
            $(bar).mousemove(function (e) {
                if (statu === true) {
                    //当鼠标移动时可监听此时的移动横坐标,由于这里需要先监控statu的值,所以mousedown和mousemove使用同一个函数里给 statu 赋值为 true对全局的操作不影响
                    ev(e);
                }
            });

            //执行事件,mousedown鼠标按下 和 mousemove鼠标移动都执行此函数,所以将其抽出
            function ev(e){
                var eleLeft = $(line).offset().left; //元素距离左侧的距离
                var eventLeft = e.pageX ;//点击事件距离左侧的距离
                $(line).width(eventLeft -eleLeft);
                //当移动的宽度大于进度条背景本身的宽度时,就把前景的宽度设置为最大,防止前景宽度超出背景宽度
                if(eventLeft -eleLeft > $(bar).width()){
                    $(line).width($(bar).width());
                }
                statu = true;   //当鼠标按时 将监控变量设置为true,表示可执行鼠标移动事件 mousemove
            }
        }

        /**
         * bar:进度条浅色半透明背景
         * line:进度条前景白色
         */
        fn("box","line");
    </script>
</body>
</html>
jquery可拖拽进度条

猜你喜欢
