Question

你好我从codepen那里得到了这个代码，我想知道是否有人可以解释我在代码中如何以及在哪里生成音量按钮而不是轨道而是扩音器符号。

HTML

<h1>Youtube Volume Control</h1>
 <div class='bsp-volume-wrap'>
   <button id='bsp-volume'>
     <span class='fa fa-volume-up'></span>
   </button>
   <div class='bsp-volume-panel'>
          <div class='bsp-volume-slider'>
       <div class='bsp-volume-slider-track'>
         <div class='bsp-volume-slider-progress'>
           <div class='bsp-volume-slider-handle'></div>
         </div>
       </div>
     </div>
   </div>
 </div>

CSS

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";
@import "//fonts.googleapis.com/css?family=Roboto:700";
html, body {
font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333333;
text-align: center;
background: #1a1a1a;
}

h1 {
margin: 70px 0 50px;
font-size: 40px;
}

button {
   background: none;
   border: none;
   color: #cccccc;
   font-size: 20px;
   padding: 0 10px;
   height: 40px;
   outline: none;
   transition: color 0.2s;
   cursor: pointer;
   float: left;
   }
   button:hover {
   color: white;
   }

   .bsp-volume-wrap {
   padding: 0 10px 0 0;
   display: inline-block;
   }
  .bsp-volume-wrap #bsp-volume {
  float: left;
  }
.bsp-volume-wrap.bsp-volume-show button {
  color: white;
    }
.bsp-volume-wrap.bsp-volume-show .bsp-volume-panel {
  width: 73px;
}
.bsp-volume-wrap .bsp-volume-panel {
  float: left;
  height: 40px;
  width: 0;
  overflow: hidden;
  transition: width 0.2s;
  cursor: pointer;
}
.bsp-volume-wrap .bsp-volume-panel .bsp-volume-slider {
  position: relative;
  height: 100%;
}
.bsp-volume-wrap .bsp-volume-panel .bsp-volume-slider-track {
  height: 2px;
  width: 70px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -1px;
  background: gray;
}
.bsp-volume-wrap .bsp-volume-panel .bsp-volume-slider-progress {
  height: 100%;
  width: 0%;
  background: red;
  position: relative;
}
.bsp-volume-wrap .bsp-volume-panel .bsp-volume-slider-handle {
  height: 12px;
  width: 3px;
  position: absolute;
  top: -5px;
  right: 0;
  background: white;
}

的Javascript

(function () {
var VolumeControl, control, getElementPercentage, bind = function (fn, me) {
        return function () {
            return fn.apply(me, arguments);
        };
    };
getElementPercentage = function (click, elm) {
    var rect;
    rect = elm.getBoundingClientRect();
    return (click.pageX - rect.left) / rect.width * 100;
};
VolumeControl = function () {
    function VolumeControl() {
        this.volumeMute = bind(this.volumeMute, this);
        this.volumeStopHandler = bind(this.volumeStopHandler, this);
        this.volumeMoveHandler = bind(this.volumeMoveHandler, this);
        this.volumeDrag = bind(this.volumeDrag, this);
        this.volumeClick = bind(this.volumeClick, this);
        this.volumeHoverOut = bind(this.volumeHoverOut, this);
        this.volumeHoverIn = bind(this.volumeHoverIn, this);
        this.video = new Audio('http://garethweaver.com/codepen/media/bensound-jazzcomedy.mp3');
        this.video.volume = 0;
        this.video.play();
        this.elm = {
            volumeWrap: document.getElementsByClassName('bsp-volume-wrap')[0],
            volumeSlider: document.getElementsByClassName('bsp-volume-slider')[0],
            volumeProgress: document.getElementsByClassName('bsp-volume-slider-progress')[0]
        };
        this.elm.volumeWrap.addEventListener('mouseenter', this.volumeHoverIn);
        this.elm.volumeWrap.addEventListener('mouseleave', this.volumeHoverOut);
        this.elm.volumeSlider.addEventListener('click', this.volumeClick);
        this.elm.volumeSlider.addEventListener('mousedown', this.volumeDrag);
        document.getElementById('bsp-volume').addEventListener('click', this.volumeMute);
    }
    VolumeControl.prototype.volumeHoverIn = function (e) {
        if (this.volumeHoverTimout) {
            clearTimeout(this.volumeHoverTimout);
        }
        return this.elm.volumeWrap.classList.add('bsp-volume-show');
    };
    VolumeControl.prototype.volumeHoverOut = function (e) {
        return this.volumeHoverTimout = setTimeout(function (_this) {
            return function () {
                return _this.elm.volumeWrap.classList.remove('bsp-volume-show');
            };
        }(this), 300);
    };
    VolumeControl.prototype.volumeClick = function (e) {
        var percent;
        percent = getElementPercentage(e, this.elm.volumeSlider);
        return this.volumeSet(percent);
    };
    VolumeControl.prototype.volumeSet = function (percent) {
        this.elm.volumeProgress.style.width = percent + '%';
        return this.lastVolume = this.video.volume = percent / 100;
    };
    VolumeControl.prototype.volumeDrag = function (e) {
        e.preventDefault();
        document.addEventListener('mousemove', this.volumeMoveHandler);
        return document.addEventListener('mouseup', this.volumeStopHandler);
    };
    VolumeControl.prototype.volumeMoveHandler = function (e) {
        var percent;
        percent = getElementPercentage(e, this.elm.volumeSlider);
        if (percent < 0) {
            percent = 0;
        } else if (percent > 100) {
            percent = 100;
        }
        return this.volumeSet(percent);
    };
    VolumeControl.prototype.volumeStopHandler = function (e) {
        document.removeEventListener('mousemove', this.volumeMoveHandler);
        return document.removeEventListener('mouseup', this.volumeStopHandler);
    };
    VolumeControl.prototype.volumeMute = function () {
        var vol;
        vol = this.video.volume > 0 ? 0 : this.lastVolume || 1;
        this.video.volume = vol;
        return this.elm.volumeProgress.style.width = vol * 100 + '%';
    };
    return VolumeControl;
}();
control = new VolumeControl();}.call(this));

这里有更容易阅读的方法是链接：http://codepen.io/garethdweaver/pen/EjqNxO

Answer 1

那是Font Awesome： https://fortawesome.github.io/Font-Awesome/icons/

去那里搜索（ctrl + F）获取“音量”。

Font Awesome加载在CSS文件的第一行：

@import "//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css";

如果您想了解更多信息，请访问fa的主页：https://fortawesome.github.io/Font-Awesome/

<强> 编辑： 除了CSS，HTML文件需要使用这个简单的行来显示扩音器：

<span class='fa fa-volume-up'></span>

如何生成音量按钮

1 个答案: