<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#my_range_warp{
position: relative;
margin: 20px;
padding: 20px;
}
#my_range{
width: 250px;/*总长度*/
height: 14px;
background: white;
border: solid 1px;
border-radius: 4px;
box-shadow:inset 0px 0px 2px 1px black;
position: relative;
}
#my_range_mask{
width: 50px;
height: 14px;
background: green;
border-radius: 4px;
box-shadow:inset 0px 0px 2px 1px green;
position:absolute;
}
#my_range_target{
width: 30px;
height: 30px;
border: solid saddlebrown 1px;
background: gray;
border-radius: 20px;
position:absolute;
cursor: pointer;
top:-10px;
left: -15px;/*距离*/
}
#my_range_target:hover{
width: 30px;
height: 30px;
border: solid saddlebrown 1px;
background: cyan;
border-radius: 20px;
position:absolute;
top:-10px;
}
</style>
</head>
<body>
<div id="my_range_warp">
<div id="my_range">
<div id="my_range_mask">
<div id="my_range_target"></div>
</div>
</div>
</div>
</body>
</html>
<script>
(function(){
var my_range=document.getElementById("my_range");
var my_range_mask=document.getElementById("my_range_mask");
var my_range_target=document.getElementById("my_range_target");
var my_range_config={
my_range_width:550
//部件配置项
}
my_range.style.width=my_range_config.my_range_width+"px";
var target_min_left=-parseInt(my_range_target.offsetWidth/2);
var target_max_left=my_range.offsetWidth-parseInt(my_range_target.offsetWidth/2);
my_range_mask.style.width=my_range_target.offsetLeft+parseInt(my_range_target.offsetWidth/2)+"px";
my_range.onmousedown=function(e){
e=e||window.event;
var startX=e.pageX-my_range_target.offsetLeft;
document.onmousemove=function(e){
if(my_range_target.offsetLeft>=target_min_left&&
my_range_target.offsetLeft<=target_max_left){
my_range_target.style.left=e.pageX-startX+"px";
my_range_mask.style.width=e.pageX-startX+parseInt(my_range_target.offsetWidth/2)+"px";
if(my_range_target.offsetLeft<=target_min_left){
my_range_target.style.left=target_min_left+"px";
my_range_mask.style.width=target_min_left+parseInt(my_range_target.offsetWidth/2)+"px";
}else if(my_range_target.offsetLeft>=target_max_left){
my_range_target.style.left=target_max_left+"px";
my_range_mask.style.width=target_max_left+parseInt(my_range_target.offsetWidth/2)+"px";
}
console.log(my_range_target.offsetLeft);//打印进度
} else{
return;
}
}
document.onmouseup=function(e){
document.onmousemove=null;
document.onmouseup=null;
}
}
})()
</script>
本文分享自 交互设计前端开发与后端程序设计 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!