[分享]css3拉动进度条

CSS3是现代Web开发中非常重要的一部分，包含了许多有用的特性，如过渡、动画、阴影和渐变等。在这篇文章中，我们将探讨如何使用CSS3创建一个拉动进度条。 .progressbarwrapper ...

CSS3是现代Web开发中非常重要的一部分，包含了许多有用的特性，如过渡、动画、阴影和渐变等。在这篇文章中，我们将探讨如何使用CSS3创建一个拉动进度条。

<div class="progress-bar-wrapper">
  <div class="progress-bar"></div>
</div>

<style>
  .progress-bar-wrapper {
    width: 200px;
    height: 10px;
    background-color: #e3e3e3;
    position: relative;
    border-radius: 5px;
    margin: 20px 0;
  }
  .progress-bar {
    width: 0;
    height: 100%;
    background-color: #4285F4;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
  }
</style> 

上面的代码展示了一个基本的HTML结构和相应的CSS样式。.progress-bar-wrapper是进度条的包装器，.progress-bar是实际的进度条。我们使用背景颜色为灰色和圆角边框样式对进度条进行了美化，并在.progress-bar上应用了CSS过渡效果。

<script>
  const progressBar = document.querySelector('.progress-bar');
  const progressBarWrapper = document.querySelector('.progress-bar-wrapper');
  let isDragging = false;

  function handleMouseDown(event) {
    isDragging = true;
    handleMouseMove(event);
  }

  function handleMouseUp(event) {
    isDragging = false;
  }

  function handleMouseMove(event) {
    if (isDragging) {
      const wrapperWidth = progressBarWrapper.clientWidth;
      const mouseX = event.clientX - progressBarWrapper.offsetLeft;
      const progress = mouseX / wrapperWidth * 100;
      progressBar.style.width = `${progress}%`;
    }
  }

  progressBarWrapper.addEventListener('mousedown', handleMouseDown);
  progressBarWrapper.addEventListener('mouseup', handleMouseUp);
  progressBarWrapper.addEventListener('mousemove', handleMouseMove);
</script> 

接下来的JavaScript代码将会帮助我们实现拖动进度条的功能。我们使用了原生JavaScript事件监听器来响应进度条的拖动事件。在鼠标按下时，程序将设置isDragging变量为true，并调用handleMouseMove函数，随后通过计算进度条的宽度和鼠标当前位置的百分比，来设置进度条的实时宽度。

至此，我们已经完成了一个完整的CSS3拉动进度条。只需将以上的HTML结构和相应的CSS样式和JavaScript代码复制并粘贴到你的网站上，就可以用它来显示一个有用的进度条了。希望本文对你有所帮助！