js 控制进度条

html

 

 

 

 js代码

function $(dom) {
            return document.querySelector(dom)
        }
        (function($){
            var scroll = $('.scroll'),
                bar =  $('.bar'),
                mask =  $('.mask'),
                barLeft = 0

            function event() {
                // mask.onclick = toMove
                bar.addEventListener('mousedown', mousedown, false)
            }

            event() // 执行时间监听

            // 播放移动
            function toMove() {
                var e = window.event || event
                e.offsetX && (mask.style.left = e.offsetX - (bar.clientWidth / 2) + 'px')
            }

            // 拖拽
            function mousedown() {
                var e = window.event || event,
                leftVal = e.clientX - bar.offsetLeft // 点击位置距离 焦点左边位置的距离

                document.onmousemove = function() {
                    var e = window.event || event,
                    barleft = e.clientX - leftVal; // 焦点左边的位置 =  点击位置距离 - 点击位置距离到焦点左边位置的距离

                    if(barleft < 0) {
                        barleft = 0
                    } else if (barleft > scroll.offsetWidth - bar.offsetWidth) {
                        barleft = scroll.offsetWidth - bar.offsetWidth

                    }
                    bar.style.left = barleft + "px";
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }

                document.onmouseup = function() {
                    console.log('out')
                    document.onmousemove = null
                }
            }
        })($)