- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
Saya memerlukan pemalam gelangsar sebegitu Ia sangat mudah, tetapi saya telah lama mencari di Internet dan tidak dapat mencari yang sesuai Anda boleh bergantung pada jquery, tetapi jangan bergantung pada jquery ui dan perpustakaan lain 
ringa_lee2017-05-19 10:37:24
Saya mengambil sedikit masa dan menulis satu. Saya tidak tahu sama ada ia mematuhi peraturan Portal: https://jsfiddle.net/0u17c6r0/
.
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.ranger {
width: 200px;
height: 10px;
border-radius: 5px;
background: lightgrey;
position: relative;
margin: 100px auto;
}
.dot {
width: 20px;
height: 20px;
position: absolute;
left: 0;
top:-5px;
background: #227dc5;
border-radius: 10px;
cursor: pointer;
}
.tip {
position: absolute;
width: 60px;
height: 25px;
text-align: center;
line-height: 25px;
left: -20px;
top: -30px;
background: #227dc5;
color: white;
}
.tip:before{
content: '';
position: absolute;
width: 0;
height: 0;
border: 5px transparent solid;
border-top-color: #227dc5;
left: 25px;
top: 25px;
}
</style>
</head>
<body>
<p class="ranger">
<p class="dot">
<p class="tip">0%</p>
</p>
</p>
<script type="text/javascript">
var dot = document.querySelector('.dot'),
tip = document.querySelector('.tip'),
startX = 0,
dotX = 0;
dot.addEventListener('mousedown', mouseDown);
document.addEventListener('mouseup', mouseUp);
function mouseDown(e) {
startX = e.clientX;
dotX = dot.offsetLeft;
document.addEventListener('mousemove', mouseMove);
}
function mouseUp() {
document.removeEventListener('mousemove', mouseMove);
}
function mouseMove(e) {
var left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180),
percentage = parseInt(left/1.8)+'%';
tip.innerText = percentage;
dot.style.left = Math.min(Math.max(dotX+(e.clientX - startX), 0), 180)+'px';
}
</script>
</body>
</html>
滿天的星座2017-05-19 10:37:24
bootstrap-slider
Anda boleh menggunakan ini, saya telah menggunakannya dan tidak mengapa.
天蓬老师2017-05-19 10:37:24
Julat input sahaja.
Jika anda ingin mempertimbangkan keserasian, anda boleh mencuba nouislider (https://refreshless.com/nouis...
漂亮男人2017-05-19 10:37:24
Saya tidak menjumpai keperluan yang begitu mudah selepas mencari untuk masa yang lama, jadi mengapa tidak menulisnya sendiri?
Pesta hulur tangan memang berleluasa, baru pijak aku.