JS进度条特效

效果图

特效分析

HTML

1、外层大的div
2、灰色底条
3、灰色上有橙色进度条进度部分
4、橙色方条前面有一个小块
5、还有进度百分比

<div id="progress">
    <div id="bar">
        <div id="front">div>
        <span>span>
    div>
    <div id="Value">0%div>
div>

CSS

1、由于橙色进度条和拖动块，都在灰色条上，所以使用定位。设置好初始位置
2、灰色底条边框、橙色条边框、以及拖动块边框需要调整样式
3、当鼠标在拖动块上时，cursor为pointer

      *{
            margin: 0;
            padding: 0;
            border: none;
            list-style: none;
        }
        #progress{
            width: 1000px;
            height: 35px;
            line-height: 35px;
           background-color: #e8e8e8;
            margin: 100px auto;
            position: relative;
        }
        #bar{
            width: 900px;/*预留文字*/
            height: 100%;
            background-color: #ccc;
            border-radius: 8px;
            position: relative;
        }
        #Value{
            position: absolute;
            right: 30px;
            top: 0px;
        }
        #front{
            width: 0px;
            height: 100%;
            background-color: orangered;
            border-top-left-radius: 8px;
            border-bottom-left-radius: 8px;
        }
        span{
            width: 25px;
            height: 50px;
            background-color: orangered;
            position: absolute;
            left: 0px;
            top: -7px;
            border-radius: 5px;
            cursor: pointer;
        }

JS

事件分析：

1、鼠标按住拖动块进行移动：onmousedown（按住）onmousemove（移动）。移动事件在按住事件中进行。
2、鼠标松开，进度条不动：onmouseup

事件触发时改变：
1、在鼠标移动时，拖动块跟着移动。

且拖动块只能在灰色底条的范围内移动。

鼠标移动时，橙色进度条的宽度也会改变。

百分比随着鼠标的移动按照比例发生改变。

2、鼠标抬起时，鼠标的移动事件关闭。

事件源：
1、橙色进度条（front）
2、橙色拖动块（mask）
3、百分比（Value）

要求的值：
1、鼠标移动时的位置。
3、在初始位置时拖块的位置
2、以及鼠标点击后移动的距离初始位置的长度
4、最后把鼠标移动之后的长度给橙色进度条的width
5、然后用块条的距离值/(橙色进度条-橙色拖动块)*100最后取整就可以了

window.onload = function () {
        //1、获取
        var progress=document.getElementById("progress");
        var bar=progress.children[0];
        var Value=progress.children[1];
        var front = bar.children[0];
        var mask=bar.children[1];
        //2、监听鼠标按下
        mask.onmousedown = function (event) {
            var e = event || window.event;
            //2、获取初识位置
            var offsetLeft = event.clientX - mask.offsetLeft;
            //2\2监听鼠标的移动
            document.onmousemove = function (event) {
                var e = event || window.event;
                //2\获取移动的位置
                var x = e.clientX - offsetLeft;
                if (x < 0) x = 0;
                else if (x >= bar.offsetWidth - mask.offsetWidth) x = bar.offsetWidth - mask.offsetWidth;
                mask.style.left = x + "px";
                front.style.width = x + "px";
                Value.innerHTML = parseInt(x / (bar.offsetWidth - mask.offsetWidth) * 100) + "%";
                return false;
            }
            //2、监听鼠标抬起
            mask.onmouseup = function (event) {
                document.onmousemove = null;
            }
        }
    }