Maison >interface Web >js tutoriel >Comment régler le curseur de volume dans js

Comment régler le curseur de volume dans js

王林avant: 2020-03-17 11:11:432955parcourir

Tout d'abord, jetons un coup d'œil à l'effet :

Comment régler le curseur de volume dans js

(Tutoriel recommandé : tutoriel javascript)

code html :

<body>
<div class="all">
<p>当前位置0%</p>
<div class="bar">
<div class="box"></div>
</div>
</div>
</body>

code 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>

code js :

<script>
var box = document.getElementsByClassName(&#39;box&#39;)[0]
var bar = document.getElementsByClassName(&#39;bar&#39;)[0]
var all = document.getElementsByClassName(&#39;all&#39;)[0]
var p = document.getElementsByTagName(&#39;p&#39;)[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 + &#39;px&#39;
// 计算比例
let bili = newL / cha * 100
p.innerHTML = &#39;当前位置&#39; + Math.ceil(bili) + &#39;%&#39;
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 + &#39;px&#39;
let bili = left / cha * 100
p.innerHTML = &#39;当前位置&#39; + Math.ceil(bili) + &#39;%&#39;
console.log(left)
return false
}
</script>

Des codes d'effets spéciaux javascript plus sympas sont disponibles sur : effets spéciaux javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript css html JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment implémenter des effets simples d'ajout et de suppression de table dans jsArticle suivant：Comment implémenter des effets simples d'ajout et de suppression de table dans js

Articles Liés

Voir plus