Question

我正在创建音量控制滑块机制，并且手柄控件未正确定位。

上获得了代码

.video {
    background: #494b43;
    border-bottom-left-radius: 60px;
    border-bottom-right-radius: 60px;
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
    display: inline-block;
    height: 40px;
    margin-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
}
.sks_horizontal {
    background-color: #63665b;
    border-radius: 4px;
    cursor: pointer;
    height: 10px;
    position: relative;
    width: 300px;
    top: 50%;
    margin-top: -5px;
}
.sks_hhorizontal {
    background: #0b84b2;
    border-radius: 100px;
    border: 5px solid #fff;
    cursor: pointer;
    height: 10px;
    position: absolute;
    width: 10px;
    top: 50%;
    margin-top: -10px;
}
.sks_progressbar {
    background: #bbd45d;
    display: inline-block;
    height: 100%;
    position: relative;
    height: 30px;
}


    <div id="video" class="video"></div>

var sks_slider = (function () {

    var createSlider = function (elem, orientation) {

        var sBar = document.createElement("div");
        var handle = document.createElement("span");
        sBar.id = "sks_seekbar";
        document.getElementById(elem).appendChild(sBar);
        document.getElementById("sks_seekbar").appendChild(handle);
        var pBar = document.createElement("div");
        pBar.id = "sks_progressbar";
        document.getElementById("sks_seekbar").appendChild(pBar);


        document.getElementById("sks_seekbar").id = "sks_seekbar_horizontal";
        handle.className = "sks_hhorizontal";
        sBar.className = "sks_horizontal";


        $(handle).mousedown(function (e) {
            $(document).bind("mousemove", function (e) {
                var hDirection = ($(handle).attr("class"));

                if (hDirection == "sks_hhorizontal") {

                    var hContainer = $(handle).parent().width();
                    var bounds = hContainer - $(handle).width();
                    var offset = $(sBar).offset().left;

                    var hPos = e.pageX - offset;

                    if ((hPos <= bounds && hPos >= 0)) {
                        $(handle).css({
                            'left': hPos
                        });
                    }
                }


            });
        });

        $(document).mouseup(function (e) {
            $(document).unbind('mousemove');
        });

    }

    return {
        create: createSlider
    };
})();

var elemh = $("#video").attr("id");
var orientationh = "horizontal";
sks_slider.create(elemh, orientationh);

我想我的数学可能已经出局了，因为当我将把手拖到中心然后再将它向后拖动时它向右移动，然后朝着它应该的方向前进。

如果有人能指出我出错的地方，我们将不胜感激。

感谢

Answer 1

我建议使用<input type="range">。这使您的代码更简单，更漂亮。有关示例，请参阅http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_input_type_range。

Answer 2

看起来向侧面的小动作是因为手柄的宽度。我将javascript更改为

var offset = $(sBar).position().left;
var hPos = e.pageX - (offset + $(handle).width());

Javascript Volume Slider可拖动手柄位置更新

2 个答案: