JS 创建滑动条

代码

//创建滑动条
/*****************************************************************************
**@ f_id : 所创建的滑动条停靠的父元素id
**@ left ：滑动条absolute样式下左边距
**@ top ： 滑动条absolute样式下上边距
**@ max : 滑动条所代表的数值的最大值，同样也是滑动条的长度
**@ localStoragename ：记录和返回当前滑动条的值，通过window.localStorage.getItem获取
******************************************************************************/
var CreateSlider = function (f_id, left, top, max,localStoragename) {
    var fEve = document.getElementById(f_id);
    window.localStorage.setItem(localStoragename, 0);
    var sliderDiv = document.createElement('div');
    sliderDiv.style.position = 'absolute';
    sliderDiv.style.left = left + 'px';
    sliderDiv.style.top = top + 'px';
    sliderDiv.style.zIndex = 99;

    //滑动长条
    var outerDiv = document.createElement('div');
    outerDiv.style.position = 'absolute';
    outerDiv.style.width = max + 'px';
    outerDiv.style.height = '8px';
    outerDiv.style.margin = '6px 0 0 0';
    outerDiv.style.background = '#fff';
    outerDiv.style.border = 'none';
    outerDiv.style.borderRadius = '3px';
    sliderDiv.appendChild(outerDiv);

    //滑动条指针
    var innerDiv = document.createElement('div');
    innerDiv.style.position = 'absolute';
    innerDiv.style.height = '20px';
    innerDiv.style.width = '5px';
    innerDiv.style.left = max / 2 + 'px';
    innerDiv.style.background = 'chocolate';
    innerDiv.style.border = '1px solid';
    innerDiv.style.borderRadius = '3px';

    sliderDiv.appendChild(innerDiv);
    fEve.appendChild(sliderDiv);

    function getPos(ev) {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        return { x: ev.clientX + scrollLeft, y: ev.clientY + scrollTop };
    }
    function getStyle(obj, name) {
        if (obj.currentStyle) {
            return obj.currentStyle[name];
        }
        else {
            return getComputedStyle(obj, false)[name];
        }
    }

    innerDiv.onmousedown = function (ev) {
        var oEvent = ev || event;
        var pos = getPos(oEvent);
        var disx = pos.x - parseInt(getStyle(innerDiv, 'left'));
        document.onmousemove = function (ev) {
            var oEvent = ev || event;
            var pos = getPos(oEvent);
            var l = pos.x - disx;
            if (l < 0) {
                l = 0;
            }
            if (l > parseInt(getStyle(outerDiv, 'width')) - parseInt(getStyle(innerDiv, 'width'))) {
                l = parseInt(getStyle(outerDiv, 'width')) - parseInt(getStyle(innerDiv, 'width'))
            }
            innerDiv.style.left = l + 'px';

            window.localStorage.setItem(localStoragename, l - max / 2);
        }
        document.onmouseup = function () {
            document.onmousemove = null;
            document.onmouseup = null;
        }
        return false;
    }
}

样式图：