技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

具有可拖动手柄的播放器进度条

作者:admin    时间:2021-10-27 11:50:59    浏览:

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

具有可拖动手柄的播放器进度条

demodownload

实例分析

jQuery 代码

此播放器进度条使用 CSS+jQuery 实现,其中jQuery包括了 jquery-3.2.1.min.jsjquery-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

idaudio-progress-bardiv 是表示已经播放的进度条(颜色较深)。

idaudio-progress-handlediv 是手柄(圆形)。

iddraggable-pointdiv 是可拖动 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进行自定义样式。

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

  • IT热文
  • 站长推荐