如何使用勾选标记html5制作“回放”滑块？

Question

我想在HTML5中执行类似这样的操作：

我希望能够这样做，以便当我点击“开始”按钮时，标记逐渐移动到下一个标记并以每秒1为增量，单击“停止”停止行为，然后再次单击“开始”从现在的位置。顶部的框仅显示与红色跟踪栏对应的秒数。假设用户可以指定标记的数量（即可以是20秒/标记宽，10秒/标记宽）。

我已经看过JQuery UI Slider http://jqueryui.com/demos/slider/虽然它没有标记，但我不确定它是否真的是最好的方式去做我描述的或者有更好的方法。

这样做的最佳javascript，jquery，html方法是什么？

Answer 1

试试这个 - 我觉得自己喜欢做运动！

<强> http://jsfiddle.net/zBKJk/

只有怪癖是底部的刻度线与TICKS_ON_BAR的不同值完全不对齐。可能是一个小的CSS /数学问题。

您可以更改这些变量

var TICKS_ON_BAR = 10; // Number of seconds to show on the bar
var TICK_RATE_MS = 100; // Interval to tick at (in milliseconds)

还添加了一个方便的回调函数

function timerComplete(){
    // Do something further when the timer hits the end of the bar
}

修改：如果您希望它能够顺利运行，您可以将间隔设置得更低或（因为您指定了HTML5）使用线性CSS3过渡来使更改生动：

http://jsfiddle.net/zBKJk/1/（有点小问题，我刚从w3schools的示例css中抛弃）

使用jQuery进行动画制作也很麻烦：http://jsfiddle.net/zBKJk/2/