用jquery实现自定义风格的滑动条实现代码

下面我将为您详细讲解使用 jQuery 实现自定义风格的滑动条的完整攻略。

第一步：引入 jQuery 库

首先，我们需要在页面中引入 jQuery 库，可以通过以下方式引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

第二步：准备页面结构

接下来，我们需要准备 HTML 结构，其中包含滑动条的容器、滑动条的轨道和滑块：

<div id="slider-container">
  <div class="slider-track">
    <div class="slider-progress"></div>
    <div class="slider-handle"></div>
  </div>
</div>

第三步：编写 CSS 样式

然后，我们需要编写 CSS 样式，对滑动条的容器、轨道和滑块进行样式的设置：

#slider-container {
  width: 300px;
  position: relative;
  height: 10px;
  background-color: #f2f2f2;
}

.slider-track {
  width: 100%;
  height: 10px;
  position: absolute;
  top: 0;
  left: 0;
}

.slider-progress {
  height: 100%;
  background-color: #999;
}

.slider-handle {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #666;
  top: -5px;
  cursor: pointer;
}

第四步：编写 jQuery 代码

最后，我们需要编写 jQuery 代码来实现滑动条的滑动效果。这里我们通过监听鼠标按下、鼠标移动、鼠标松开的事件来实现滑块的拖动：

$(function() {
  var $handle = $('.slider-handle');
  var $progress = $('.slider-progress');
  var $track = $progress.parent();

  $handle.on('mousedown', function(e) {
    var startX = e.pageX;
    var offset = $handle.offset().left;
    var startLeft = startX - offset;
    var maxWidth = $track.width() - $handle.width();

    $(document).on('mousemove', function(e) {
      var endX = e.pageX;
      var endLeft = endX - startLeft;

      if (endLeft < 0) {
        endLeft = 0;
      } else if (endLeft > maxWidth) {
        endLeft = maxWidth;
      }

      $handle.css('left', endLeft);
      $progress.width(endLeft);
    }).on('mouseup', function(e) {
      $(this).off('mousemove');
    });

    return false;
  });
});

在上述代码中，我们首先定义了滑块、进度条和轨道的 jQuery 对象，然后监听了 mousedown 事件，当鼠标按下时获取滑块相对于父容器的偏移量，并计算了最大的可移动距离。接着，我们监听了 mousemove 事件，根据鼠标移动的距离计算出滑块应该移动到的位置，并更新滑块和进度条的宽度。最后，我们监听了 mouseup 事件，当鼠标松开时移除了 mousemove 事件的监听。

示例说明一

以下是一个有初始值的滑动条示例：

HTML 结构：

<div id="slider-container">
  <div class="slider-track">
    <div class="slider-progress" style="width: 30%;"></div>
    <div class="slider-handle" style="left: 30%;"></div>
  </div>
</div>

jQuery 代码：

$(function() {
  var $handle = $('.slider-handle');
  var $progress = $('.slider-progress');
  var $track = $progress.parent();
  var initWidth = $progress.width();
  var initLeft = $handle.position().left;

  $handle.on('mousedown', function(e) {
    // ...
  });

  $progress.width(initWidth);
  $handle.css('left', initLeft);
});

在这个示例中，我们在 HTML 结构中通过添加 style 标签设置了初始值，并在 jQuery 代码中将初始值应用到了滑块和进度条上。

示例说明二

以下是一个带回调函数的滑动条示例：

HTML 结构：

<div id="slider-container">
  <div class="slider-track">
    <div class="slider-progress"></div>
    <div class="slider-handle"></div>
  </div>
</div>

jQuery 代码：

$(function() {
  var $handle = $('.slider-handle');
  var $progress = $('.slider-progress');
  var $track = $progress.parent();
  var initWidth = $progress.width();
  var initLeft = $handle.position().left;

  function onChange(value) {
    console.log('当前值：', value);
  }

  function updateValue() {
    var sliderWidth = $track.width() - $handle.width();
    var leftPercent = $handle.position().left / sliderWidth;
    var value = Math.round(leftPercent * 100);
    onChange(value);
  }

  $handle.on('mousedown', function(e) {
    // ...
  });

  $(document).on('mouseup', function() {
    updateValue();
  });

  $progress.width(initWidth);
  $handle.css('left', initLeft);
});

在这个示例中，我们添加了 onChange 函数，并在 updateValue 函数中计算当前滑动条对应的值，并在鼠标松开时调用 updateValue 函数，更新当前值并回调 onChange 函数。

以上就是使用 jQuery 实现自定义风格的滑动条的完整攻略了。