Maison > Questions et réponses > le corps du texte
J'ai besoin d'un tel plug-in de curseur. C'est très simple, mais je cherche depuis longtemps sur Internet et je n'en trouve pas un qui me convient. Vous pouvez compter sur jquery, mais ne comptez pas sur jquery. interface utilisateur et autres bibliothèques 
ringa_lee2017-05-19 10:37:24
J'ai pris du temps et j'en ai écrit un. Je ne sais pas s'il est conforme aux règles. Portail : 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
Vous pouvez l’utiliser, je l’ai utilisé et tout va bien.
天蓬老师2017-05-19 10:37:24
Juste la plage de saisie.
Si vous souhaitez considérer la compatibilité, vous pouvez essayer nouislider (https://refreshless.com/nouis...
漂亮男人2017-05-19 10:37:24
Je n'ai pas trouvé une exigence aussi simple après avoir longtemps cherché, alors pourquoi ne pas en écrire une moi-même ?
La fête de sensibilisation est vraiment endémique, ils viennent de me marcher dessus.