css+原生js调节音量滑块

效果

html部分

< body >

< div class= "all" >

< p >当前位置0% </ p >

< div class= "bar" >

< div class= "box" ></ div >

</ div >

</ div >

</ body >

css部分

< style >

.all {

width: 500px;

height: 80px;

margin: 100px auto;

position: relative;

}

.bar {

width: 500px;

height: 20px;

border-radius: 10px;

background: #aaa;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

cursor: pointer;

}

.box {

width: 30px;

height: 30px;

background: #000;

position: absolute;

bottom: 0;

top: 0;

margin: auto 0;

border-radius: 50%;

cursor: pointer;

transition: left 0.1s linear 0s;

}

< / style >

js逻辑

< script >

var box = document. getElementsByClassName( 'box')[ 0]

var bar = document. getElementsByClassName( 'bar')[ 0]

var all = document. getElementsByClassName( 'all')[ 0]

var p = document. getElementsByTagName( 'p')[ 0]

var cha = bar. offsetWidth - box. offsetWidth

box. onmousedown = function ( ev) {

let boxL = box. offsetLeft

let e = ev || window. event //兼容性

let mouseX = e. clientX //鼠标按下的位置

window. onmousemove = function ( ev) {

let e = ev || window. event

let moveL = e. clientX - mouseX //鼠标移动的距离

let newL = boxL + moveL //left值

// 判断最大值和最小值

if ( newL < 0) {

newL = 0

}

if ( newL >= cha) {

newL = cha

}

// 改变left值

box. style. left = newL + 'px'

// 计算比例

let bili = newL / cha * 100

p. innerHTML = '当前位置' + Math. ceil( bili) + '%'

return false //取消默认事件

}

window. onmouseup = function () {

window. onmousemove = false //解绑移动事件

return false

}

return false

};

// 点击音量条

bar. onclick = function ( ev) {

let left = ev. clientX - all. offsetLeft - box. offsetWidth / 2

if ( left < 0) {

left = 0

}

if ( left >= cha) {

left = cha

}

box. style. left = left + 'px'

let bili = left / cha * 100

p. innerHTML = '当前位置' + Math. ceil( bili) + '%'

console. log( left)

return false

}

< / script >