jqueryUI 设置数值的滑动条
实现基本的HTML+CSS
查看拖拽的偏移量
可以从这个方法中获取到了小红块的拖动偏移量left，那么只要通过这个left进行计算，将计算的值赋值给右边的数字之中。
根据偏移量计算 0 - 100 的进度值
给拖动的小红块前面加个伸缩的进度条
随着前面的小红块拖拉，后面也会伸缩填充前面的进度。
完整代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<style type="text/css">
*{margin:0;padding: 0;font-size: 0;}
.wrap{
height: 20px;
width: 530px;
margin:50px auto;
}
.outside_line{
width: 500px;
height: 20px;
border:2px solid #ccc;
display: inline-block;
}
.outside_line .drap_box{
width: 20px;
height: 20px;
background: pink;
float: left;
}
.outside_line .drag_after{
/*width: 50px;*/
width: 0;
height: 20px;
background-color: pink;
float: left;
position: absolute;
}
.nums{
width: 20px;
height: 20px;
border: 2px solid #ccc;
float: right;
}
.nums em{
display: block;
width: 100%;
height: 100%;
font-style: normal;
text-align: center;
color: lightblue;
font-size: 14px;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
// alert( $('.nums em').html() );
$('.drap_box').draggable({
containment: "parent", // 限制在父级元素下拖动
opacity: 0.6, // 设置拖动的时候，透明度设置为0.6
drag:function(ev,ui){
console.log(ui.position.left);
// console.log(parseInt((ui.position.left/480)*100));
$('.nums em').html( parseInt((ui.position.left/480)*100) );
$(".drag_after").css({"width":ui.position.left});
}
})
})
</script>
</head>
<body>
<div class="wrap">
<div class="outside_line">
<div class="drag_after"></div>
<div class="drap_box"></div>
</div>
<div class="nums"><em>0</em></div>
</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2019.05.12 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
