雅荷心语博客最近在写一个音乐播放器,目前实现的两种方式简单做个记录,最终效果都一样!
第一种, 使用传统页面布局,使用js控制
具体实现方式是:
首先我们做一个布局,做成如图的样子, 包含一个轨道和一个滑块!
然后使用js的一系列事件来控制滑块,具体如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
var isDown = false; var $progress = $(".progress"); $progress.click(function (e) { var progressWidth = $progress.width(), progressOffsetLeft = $progress.offset().left; volume = (e.clientX - progressOffsetLeft) / progressWidth; config.audio.volume = volume; }); $(".drag", $progress).mousedown(function () { isDown = true; $(".volume-on", $progress).removeClass("ts5") }); $(window).on({ mousemove: function (e) { if (isDown) { var progressWidth = $progress.width(), progressOffsetLeft = $progress.offset().left, eClientX = e.clientX; if (eClientX >= progressOffsetLeft && eClientX <= progressOffsetLeft + progressWidth) { $(".volume-on", $progress).width((eClientX - progressOffsetLeft) / progressWidth * 0x64 + "%"); volume = (eClientX - progressOffsetLeft) / progressWidth; config.audio.volume = volume; var vol = window.parseInt(config.audio.volume * 100); tips.show("音量：" + vol + "%") } } }, mouseup: function () { isDown = false; $(".volume-on", $progress).addClass("ts5") } }); |
第二种方式, 使用html5 的 “type=”range”, 使用CSS样式来美化一下按钮及效果就行, 取值的话直接取表单的value
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
} .progress input { width: 99%; -webkit-appearance: none; border-radius: 5px; outline: none; background: rgba(129, 195, 0, 0.2); height: 2px; padding-left: 1%; transition:all 0.5s ease-in-out 0.1s; cursor: pointer; position: absolute; top: 0; } .progress input:hover{ background: rgba(129, 195, 0, 0.2); } .progress input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; height: 10px; width: 10px; background: #ffffff; border-radius: 50%; /*外观设置为圆形*/ border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/ box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/ cursor: pointer; margin-top: -2px; } |
核心css代码如上,
