原生js+css调节音量滑块

下面是具体的攻略流程：

1. 原生JS实现音量滑块

1.1 HTML模板

首先，我们需要创建需要的HTML模板结构，包括音量滑块的整体容器，以及音量条、拖动块、静音按钮等子元素。

<div class="volume-wrap">
  <div class="volume-bar"></div>
  <div class="volume-handle"></div>
  <button class="volume-mute"></button>
</div>

1.2 CSS样式

接下来，我们需要将这些子元素进行样式的设置，制作出一个完整的音量滑块。可以通过CSS伪元素来模拟拖动块的样式，并实现滑动过程中拖动块样式的改变。

.volume-wrap {
  position: relative;
  width: 100px;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.volume-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #666;
  transition: width 0.3s ease;
}

.volume-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #666;
  border-bottom: 5px solid transparent;
}

.volume-handle::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #666;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 0;
  transition: background-color 0.3s ease;
}

.volume-mute {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #666;
  border: none;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

.volume-mute::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

1.3 JS实现

最后，我们需要通过JS来实现音量滑块的交互逻辑。主要分为以下几个步骤：

获取音量滑块的各个子元素。
给拖动块添加mousedown和touchstart事件，并记录当前拖动块的位置。
给document添加mousemove和touchmove事件，并根据移动距离计算出拖动块的新位置，同时修改音量条的宽度和静音按钮的背景颜色。
给document添加mouseup和touchend事件，结束拖动操作。

下面是示例代码：

const volumeWrap = document.querySelector(".volume-wrap");
const volumeBar = volumeWrap.querySelector(".volume-bar");
const volumeHandle = volumeWrap.querySelector(".volume-handle");
const volumeMute = volumeWrap.querySelector(".volume-mute");

let dragging = false;  // 是否正在拖动
let startClientX;   // 开始拖动时的鼠标/触摸位置
let startHandleLeft;  // 开始拖动时的拖动块的位置

volumeHandle.addEventListener("mousedown", startDrag);
volumeHandle.addEventListener("touchstart", startDrag);

function startDrag(e) {
  dragging = true;
  startClientX = getClientX(e);
  startHandleLeft = parseFloat(volumeHandle.style.left) || 0;

  document.addEventListener("mousemove", onDrag);
  document.addEventListener("touchmove", onDrag);
  document.addEventListener("mouseup", stopDrag);
  document.addEventListener("touchend", stopDrag);
}

function onDrag(e) {
  if (!dragging) return;

  const clientX = getClientX(e);
  const diffX = clientX - startClientX;
  const handleLeft = startHandleLeft + diffX;
  const newWidth = handleLeft + volumeHandle.offsetWidth / 2;

  // 限制拖动范围不超过音量滑块
  if (handleLeft < 0) {
    handleLeft = 0;
  } else if (handleLeft > volumeWrap.offsetWidth - volumeHandle.offsetWidth) {
    handleLeft = volumeWrap.offsetWidth - volumeHandle.offsetWidth;
  }

  volumeHandle.style.left = handleLeft + "px";  // 移动拖动块

  // 根据拖动的位置修改音量条宽度
  volumeBar.style.width = newWidth + "px";

  // 修改静音按钮背景颜色
  if (newWidth === 0) {
    volumeMute.style.backgroundColor = "#f00";
  } else {
    volumeMute.style.backgroundColor = "#666";
  }
}

function stopDrag() {
  dragging = false;
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("touchmove", onDrag);
  document.removeEventListener("mouseup", stopDrag);
  document.removeEventListener("touchend", stopDrag);
}

// 获取当前鼠标/触摸位置
function getClientX(e) {
  if (e.type === "touchstart" || e.type === "touchmove") {
    return e.touches[0].clientX;
  }
  return e.clientX;
}

2. 原生JS+CSS调节音量滑块示例

接下来，我们结合示例来展示如何调节音量滑块的样式和交互逻辑。

2.1 实现调节音量滑块的样式

首先，我们可以按照上面的步骤，通过HTML+CSS的方式实现一个基本的音量滑块：

<div class="volume-wrap">
  <div class="volume-bar"></div>
  <div class="volume-handle"></div>
  <button class="volume-mute"></button>
</div>

.volume-wrap {
  position: relative;
  width: 100px;
  height: 10px;
  background-color: #ddd;
  border-radius: 5px;
  overflow: hidden;
}

.volume-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #666;
  transition: width 0.3s ease;
}

.volume-handle {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 10px solid #666;
  border-bottom: 5px solid transparent;
}

.volume-handle::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #666;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 0;
  transition: background-color 0.3s ease;
}

.volume-mute {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background-color: #666;
  border: none;
  border-radius: 50%;
  outline: none;
  cursor: pointer;
}

.volume-mute::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  background-color: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

这样，我们就可以得到一个简单的音量滑块，但是它无法响应鼠标或者触摸事件，无法实现交互操作。

2.2 实现调节音量滑块的交互逻辑

接下来，我们可以按照上面的步骤，使用JS来实现一个可以响应鼠标或者触摸事件，可以实现调节音量的交互音量滑块。可以按照以下方式来实现：

const volumeWrap = document.querySelector(".volume-wrap");
const volumeBar = volumeWrap.querySelector(".volume-bar");
const volumeHandle = volumeWrap.querySelector(".volume-handle");
const volumeMute = volumeWrap.querySelector(".volume-mute");

let dragging = false;  // 是否正在拖动
let startClientX;   // 开始拖动时的鼠标/触摸位置
let startHandleLeft;  // 开始拖动时的拖动块的位置

volumeHandle.addEventListener("mousedown", startDrag);
volumeHandle.addEventListener("touchstart", startDrag);

function startDrag(e) {
  dragging = true;
  startClientX = getClientX(e);
  startHandleLeft = parseFloat(volumeHandle.style.left) || 0;

  document.addEventListener("mousemove", onDrag);
  document.addEventListener("touchmove", onDrag);
  document.addEventListener("mouseup", stopDrag);
  document.addEventListener("touchend", stopDrag);
}

function onDrag(e) {
  if (!dragging) return;

  const clientX = getClientX(e);
  const diffX = clientX - startClientX;
  const handleLeft = startHandleLeft + diffX;
  const newWidth = handleLeft + volumeHandle.offsetWidth / 2;

  // 限制拖动范围不超过音量滑块
  if (handleLeft < 0) {
    handleLeft = 0;
  } else if (handleLeft > volumeWrap.offsetWidth - volumeHandle.offsetWidth) {
    handleLeft = volumeWrap.offsetWidth - volumeHandle.offsetWidth;
  }

  volumeHandle.style.left = handleLeft + "px";  // 移动拖动块

  // 根据拖动的位置修改音量条宽度
  volumeBar.style.width = newWidth + "px";

  // 修改静音按钮背景颜色
  if (newWidth === 0) {
    volumeMute.style.backgroundColor = "#f00";
  } else {
    volumeMute.style.backgroundColor = "#666";
  }
}

function stopDrag() {
  dragging = false;
  document.removeEventListener("mousemove", onDrag);
  document.removeEventListener("touchmove", onDrag);
  document.removeEventListener("mouseup", stopDrag);
  document.removeEventListener("touchend", stopDrag);
}

// 获取当前鼠标/触摸位置
function getClientX(e) {
  if (e.type === "touchstart" || e.type === "touchmove") {
    return e.touches[0].clientX;
  }
  return e.clientX;
}

这样，我们就实现了一个可以响应交互事件，能够实现调节音量的音量滑块。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：原生js+css调节音量滑块 - Python技术站