卡卡网

本文介绍一个播放器进度条，它具有可拖动的手柄。

demodownload

实例分析

jQuery 代码

此播放器进度条使用 CSS+jQuery 实现，其中jQuery包括了 jquery-3.2.1.min.js 和 jquery-ui-1.11.2.min.js 两个文件。 jquery-ui-1.11.2.min.js 是实现拖动手柄的插件。

<script src='jquery-3.2.1.min.js'></script>
<script src='jquery-ui-1.11.2.min.js'></script>

jQuery 代码如下：

<script>
$('#draggable-point').draggable({
  axis: 'x',
  containment: "#audio-progress" });


$('#draggable-point').draggable({
  drag: function () {
    var offset = $(this).offset();
    var xPos = 100 * parseFloat($(this).css("left")) / parseFloat($(this).parent().css("width")) + "%";

    $('#audio-progress-bar').css({
      'width': xPos });

  } });
</script>

HTML 代码

<div id="audio-player-container">
  <div class="audio-progress" id="audio-progress">
    <div id="draggable-point" style="left:75%;position:absolute;" class="draggable ui-widget-content">
      <div id="audio-progress-handle"></div>
    </div>
    <div id="audio-progress-bar" class="bar" style="width:75%">
    </div>
  </div>
</div>

HTML代码比较简单，只使用几个 div。

id 为 audio-progress-bar 的 div 是表示已经播放的进度条（颜色较深）。

id 为 audio-progress-handle 的 div 是手柄（圆形）。

id 为 draggable-point 的 div 是可拖动 div，它里面包含的便是手柄。

CSS 代码

.audio-progress {
  height: .5rem;
  width: 100%;
  background-color: #C0C0C0;
}
.audio-progress .bar {
  height: 100%;
  background-color: #E95F74;
}

#audio-progress-handle {
  display: block;
  position:absolute;
  z-index: 1;
  margin-top: -5px;
  margin-left: -10px;
  width: 10px;
  height: 10px;
  border: 4px solid #D3D5DF;
  border-top-color: #D3D5DF;
  border-right-color: #D3D5DF;
  transform: rotate(45deg);
  border-radius: 100%;
  background-color: #fff;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
  cursor:pointer;
}

.draggable {
  float: left; margin: 0 10px 10px 0;
}

CSS代码并不多，它主要是设置进度条和手柄的位置及颜色。

进度条背景颜色设置：

.audio-progress {
  background-color: #C0C0C0;
}

表示已经播放进度的颜色设置：

.audio-progress .bar {
  background-color: #E95F74;
}

#audio-progress-handle 设置的是手柄大小及颜色等样式。

总结

本实例介绍了一个简单的播放器进度条，它具有可拖动的手柄，此播放器进度条使用 CSS+jQuery 实现，代码简洁易理解，并且非常方便的修改CSS进行自定义样式。

您可能对以下文章也感兴趣

• 11款矩形（动画）进度条实例
• 7款圆角（动画）进度条实例
• 7款步骤进度条实例
• 4款圆形/径向进度条实例
• CSS3创建时尚且具有动画效果的进度条

标签: 进度条  播放器进度条