具有滑动能力的进度条

Question

我是JavaScript / CSS的新手（基本上是web dev的整个世界），我真的很难创建以下小部件。我创建了一张我想要制作的图片，以使其更清晰。

播放/暂停和停止按钮已准备就绪。循环复选框没问题。但进度条很痛苦。这两个标记应该标记文件开始播放的位置以及停止的位置。进度条也应该是可点击的，所以如果我想访问某个特定时间点，那么它可能是。

到目前为止我尝试了什么

jQuery UI滑块：用于滑动进度条并使用该可拖动滑块访问音频文件中的某个点。工作良好。但没有标记，看起来真的很难看。不要如何改变它。

<progress>标签：不是很灵活。标记？点击？

<div>标签：似乎无法获得我点击的位置。

那么，你们推荐什么？我该怎么办？

Answer 1

Canvas Alternative

您可能希望使用canvas并在其中绘制自己的进度条元素。

以下是一些画布进度条教程：

• How to create a progress bar with HTML5
• A progress bar using HTML5 canvas

---

使用<progress>

进行操作

要访问DOMElement中的点击位置，您可以继续点击事件的属性：clientX和clientY（ MDN Source ），如下所示：

HTML

<div class="marker" id="StartMarker">^</div>
<div class="marker" id="StopMarker">^</div>
<progress id="progress" value="0" min="0" max="100">0%</progress>
<form id="choice">
    <button id="marker1">Beginning marker</button>
    <button id="marker2">Ending marker</button>
    <input type="hidden" id="markerValue" value="0" />
</form>

JavaScript（未优化）

document.getElementById('progress').onclick = function (event, element) {
    /* Math.floor((event.offsetX / this.offsetWidth) * 100) */
    var newProgress = event.offsetX;

    document.getElementById('choice').style.display = "block";
    document.getElementById('markerValue').setAttribute('value', newProgress);

    document.getElementById('marker1').onclick = function (event) {
        event.preventDefault();

        var newProgress = document.getElementById('markerValue').value;
        var progressBar = document.getElementById('progress');
        var startMarker = document.getElementById('StartMarker');
        var stopMarker = document.getElementById('StopMarker');

        var marker = startMarker;
        marker.style.display = "block";

        startMarker.style.display = "block";
        startMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
        startMarker.style.left = newProgress + "px";

    };

    document.getElementById('marker2').onclick = function (event) {
        event.preventDefault();

        var newProgress = document.getElementById('markerValue').value;
        var progressBar = document.getElementById('progress');
        var startMarker = document.getElementById('StartMarker');
        var stopMarker = document.getElementById('StopMarker');


        stopMarker.style.display = "block";
        stopMarker.offsetTop = (progressBar.offsetTop + progressBar.offsetHeight + 2) + "px";
        stopMarker.style.left = newProgress + "px";
    };
};

CSS

.marker {
    position:absolute;
    top:24px;
    left:9px;
    display:none;
    z-index:8;
    font-weight:bold;
    text-align:center;
}
#StartMarker {
    color: #CF0;
}
#StopMarker {
    color:#F00;
}
#choice {
    display:none;
}
progress {
    display: inline-block;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 300px;
    height: 20px;
    padding: 3px 3px 2px 3px;
    background: #333;
    background: -webkit-linear-gradient(#2d2d2d, #444);
    background: -moz-linear-gradient(#2d2d2d, #444);
    background: -o-linear-gradient(#2d2d2d, #444);
    background: linear-gradient(#2d2d2d, #444);
    border: 1px solid rgba(0, 0, 0, .5);
    border-radius: 15px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .2);
}

Live Demo

Answer 2

可以使用简单的块。你的布局看起来像这样（简化）：

<强> HTML

<div class="progressbar">
    <div class="bar">
        <div class="progress" style="width: 30%;">
        </div>
    </div>
    <div class="markers">
        <div class="right" style="width: 70%;">
            <div class="marker">
            </div>
            <div class="left" style="width: 20%;">
                <div class="marker">
                </div>
            </div>
        </div>
    </div>
</div>

<强> SCSS

.progressbar {
    width: 20em;
    background: grey;
    .bar {
        height: 2em;
        .progress {
            background: blue;
            height: 100%;
        }
    }
    .markers {
        height: 1em;
        background: white;
        .right {
            height: 100%;
            background: red;
            .marker {
                width: 1em;
                height: 100%;
                background: green;
                position: relative;
                float: right;
            }
            .left {
                background: white;
                height: 100%;
            }
        }
    }
}

操作非常困难

<强>的jQuery

$('.bar').click(function(e){
    $(this).find('.progress').css('width', (e.offsetX / this.offsetWidth)*100+'%');
});

会在点击时正确设置进度条。

对于标记虽然你需要mousedown，mousemove，mouseleave事件，因为你有2个。

示例

http://jsfiddle.net/JXauW/