html 小圆点图标,HTML 滑块图标

效果截图：css

Html页：html

滑块图标

当前位置0%

⟷

ide

css样式：3d

.SliderIcon {

width: 250px;

height: 80px;

margin: 100px auto;

position: relative;

}htm

.bar {

width: 250px;

height: 5px;

border-radius: 10px;

background: #aaa;

background-size: 30% 0%;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

cursor: pointer;

}

.barContent {

height: 5px;

border-radius: 10px;

background: #1199c6;

position: absolute;

cursor: pointer;

}

.box {

width: 22px;

height: 22px;

background: #1199c6;

position: absolute;

bottom: 0;

top: 0;

margin: auto 0;

border-radius: 50%;

cursor: pointer;

transition: left 0.1s linear 0s;

text-align: center;

font-size: 14px;

color: #ffffff;

font-weight:bold;

}blog

JS逻辑:事件

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

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

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

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

var cha = bar.offsetWidth - box.offsetWidth

var barContent = document.getElementById("barContent");

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

}

// 计算比例

let bili = newL / cha * 100;

// 改变left值

box.style.left = barContent.style.width = newL + 'px';

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 - SliderIcon.offsetLeft - box.offsetWidth / 2

if (left < 0) {

left = 0

}

if (left >= cha) {

left = cha

}

let bili = left / cha * 100;

box.style.left = barContent.style.width = left + 'px';

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

return false

}ip