如何使用CSS&HTML实现类似音量控制的拖动条

Posted 2023-04-18

参考技术A 先用css做出控制条的样式，再用js里面的mousedown和mouseup来实现鼠标的拖动，如果是手机，那么就是touch事件了本回答被提问者采纳

通过滚动控制音量

【中文标题】通过滚动控制音量

【英文标题】：Control audio volume with scrolling

【发布时间】：2017-06-08 11:23:14

【问题描述】：

我正在为一个学校项目制作一个网站，但我以前从未使用过编码 - 所以如果我不知道如何正确表达我的问题，我很抱歉..

当我在我的网站上向下滚动时，我想降低音频剪辑的音量。我很难理解 JavaScript 的逻辑......我有点想尽可能地坚持 HTML 和 CSS，但我必须为此使用 jQuery，对吧？

我希望你们中的一些人能指出我正确的方向。在此先感谢！

【问题讨论】：

This W3schools 文章应该可以帮助您入门。只需使用普通的 javascript 即可完成，不需要 jQuery。

这里有一些已经回答的问题，它可能会对你有所帮助。 ***.com/questions/23281337/…

我们在第一次尝试编码时也遇到了同样的困难。再试一次。

有趣的问题，但它不属于How to Ask 的范围。请添加您拥有的最少代码量，以便给出正确的答案。简短的回答，是的。这是可能的，并且需要 JavaScript。然而，jQuery 可以让它变得更容易。

【参考方案1】：

看看这个例子，希望可以帮助你开始（滚动视频）：

$(function() 

  var video = $('#myVideo');
  var videoEl = video[0];
  var delta = 0.1; //you can choose whatever delta ( + delta + volume change speed )
  video.on('wheel', function(event) 
    event.preventDefault(); //prevent default page scroll;
    //check for scroll down 
    if (event.originalEvent.deltaY > 0 && videoEl.volume - delta >= 0) 
      videoEl.volume -= delta;
    //check for scroll up 
     else if(event.originalEvent.deltaY < 0 && videoEl.volume + delta <= 1) 
      videoEl.volume += delta;
    
  );

)

html 
  padding: 20px 0;
  background-color: #efefef;


body 
  width: 400px;
  padding: 40px;
  margin: 0 auto;
  background: #fff;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);


video 
  width: 400px;
  display: block;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="myVideo" autobuffer controls autoplay>
  <source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4">
</video>