卡卡網(wǎng)

本文介紹一個播放器進(jìn)度條，它具有可拖動的手柄。

demodownload

實(shí)例分析

jQuery 代碼

此播放器進(jìn)度條使用 CSS+jQuery 實(shí)現(xiàn)，其中jQuery包括了 jquery-3.2.1.min.js 和 jquery-ui-1.11.2.min.js 兩個文件。 jquery-ui-1.11.2.min.js 是實(shí)現(xiàn)拖動手柄的插件。

<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 是表示已經(jīng)播放的進(jìn)度條（顏色較深）。

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代碼并不多，它主要是設(shè)置進(jìn)度條和手柄的位置及顏色。

進(jìn)度條背景顏色設(shè)置：

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

表示已經(jīng)播放進(jìn)度的顏色設(shè)置：

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

#audio-progress-handle 設(shè)置的是手柄大小及顏色等樣式。

總結(jié)

本實(shí)例介紹了一個簡單的播放器進(jìn)度條，它具有可拖動的手柄，此播放器進(jìn)度條使用 CSS+jQuery 實(shí)現(xiàn)，代碼簡潔易理解，并且非常方便的修改CSS進(jìn)行自定義樣式。

您可能對以下文章也感興趣

• 11款矩形（動畫）進(jìn)度條實(shí)例
• 7款圓角（動畫）進(jìn)度條實(shí)例
• 7款步驟進(jìn)度條實(shí)例
• 4款圓形/徑向進(jìn)度條實(shí)例
• CSS3創(chuàng)建時尚且具有動畫效果的進(jìn)度條

標(biāo)簽: 進(jìn)度條  播放器進(jìn)度條