如下为完整demo代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拖拽进度条demo</title>
<style>
html,body{
padding:0;
margin:0;
}
.box{
position:relative;
height:80px;
background:red;
}
.left{
position:absolute;
height:80px;
width:20%;
left:0;
text-align: center;
line-height: 80px;
top:0;
}
.right{
position:absolute;
left:20%;
top:0;
height:80px;
width:80%;
background:green;
}
.longbar{
position:absolute;
/* left:50%;
top:50%;
transform: translate(-50%,-50%); */
/* 不要使用transform会影响计算元素位置准确性 */
left:10%;
top:50%;
width:80%;
height:10px;
background:#ccc;
}
.smallbar{
position:absolute;
left:0;
top:-10px;
height:30px;
width:10px;
background:yellow;
}
</style>
</head>
<body>
<div class='box'>
<div class='left'>占比<span id='pre'>0%</span></div>
<div class='right'>
<div class='longbar'>
<div class='smallbar'></div>
</div>
</div>
</div>
<script>
var pretext=document.getElementById('pre')
var rightbox=document.getElementsByClassName('right')[0];
var longbar=document.getElementsByClassName('longbar')[0];
var smallbar=document.getElementsByClassName('smallbar')[0];
//长条的长度
var longbarwidth=longbar.offsetWidth-10;
//获取元素相对于页面位置
function getpops(obj){
var pops={left:0,top:0}
while(obj){
pops.left+=obj.offsetLeft;
pops.top+=obj.offsetTop;
obj=obj.offsetParent
}
return pops
}
var ismove=false;//是否触摸了滑块
var initleft=getpops(longbar).left
function startfunc(){
ismove=true;
console.log('触摸了滑块');
rightbox.addEventListener('touchmove',movefunc,false)
}
function movefunc(e ){
var instance=e.touches[0].clientX-initleft
console.log(instance,'距离',e.touches[0].clientX,initleft)
//限制活动位置
if(ismove&&instance>0&&instance<longbarwidth){
smallbar.style.left=instance+'px';
var pre=(instance/longbarwidth)*100
console.log(pre+'%');
pre=pre>90?pre+1:pre
pretext.innerText=parseInt(pre)+'%'
}else{
return
}
}
function endfunc(){
ismove=false;
rightbox.removeEventListener('touchmove',movefunc,false)
}
smallbar.addEventListener('touchstart',startfunc,false)
rightbox.addEventListener('touchend',endfunc,false)
</script>
</body>
</html>
2349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
