javascript - 求推荐一个jquery滑动块插件，功能很简单
本文介绍了javascript - 求推荐一个jquery滑动块插件，功能很简单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
需要这样一个滑块插件，很简单，但是从网上找了好久找不到合适的，求大神推荐一个，可以依赖jquery，但不要依赖jquery ui和其他库
解决方案
抽了点时间，写了一个，不知道符合规则不
传送门：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>
<div class="ranger">
<div class="dot">
<div class="tip">0%</div>
</div>
</div>
<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>这篇关于javascript - 求推荐一个jquery滑动块插件，功能很简单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
