小球css代码:
.ball-wrap-box {
width: 500px;
height: 3px;
margin: auto;
position: relative;
top: 50px;
background-color: #ccc;
}
.line {
width: 450px;
height: 3px;
background: #e3e3e3;
position: absolute;
top: 0;
bottom: 0;
left: 25px;
margin: auto;
background: red;
}
.balla {
width: 50px;
height: 50px;
background: #fff;
position: absolute;
top: -25px;
margin: auto;
left: 0;
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 99;
text-align: center;
line-height: 50px;
}
.ballaac {
width: 50px;
height: 50px;
background: #fff;
position: absolute;
top: -25px;
margin: auto;
left: calc(500px - 50px);
border-radius: 50%;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 23;
text-align: center;
line-height: 50px;
}
小球建构
<div class="ball-wrap-box">
<div class="balla"></div>
<div class="ballaac"></div>
<div class="line"></div>
</div>
小球js
var ballaLeft = document.querySelector('.balla')
var ballRight = document.querySelector('.ballaac')
var line = document.querySelector('.line')
function Fn(item, e) {
var disx = e.changedTouches[0].pageX - item.offsetLeft
item.ontouchmove = function (e) {
var x = e.changedTouches[0].pageX - disx
x < 0 ? x = 0 : x
x > 400 ? x = 450 : x
item.style.left = x + 'px'
line.style.width = Math.abs(ballRight.offsetLeft - ballaLeft.offsetLeft) + 20 + 'px';
line.style.left = Math.min(ballaLeft.offsetLeft, ballRight.offsetLeft) + 'px';
}
}
ballaLeft.ontouchstart = function (e) {
Fn(ballaLeft, e)
}
ballRight.ontouchstart = function (e) {
Fn(ballRight, e)
}