第
React实现双滑块交叉滑动
//计算线条的宽小球交互计算绝对值就是线条的宽
this.lineWidth=Math.abs(this.oBallTwo.offsetLeft-this.oBall.offsetLeft)
//线条的宽度
this.line.style.width=this.lineWidth+px
//小球距离左边的距离
ev.target.style.left=this.X+px
//判断右边小球的offsetLeft减掉左边小球的offsetLeft值如果小于0就是右边小球距离左边最近取出它的offsetLeft值就是线条距离左边的值
if(this.oBallTwo.offsetLeft-this.oBall.offsetLeft0){
this.line.style.left=this.oBallTwo.offsetLeft+px
}else{
this.line.style.left=this.oBall.offsetLeft+px
fnEnd(){
document.ontouchmove=null
document.ontouchend=null
render(){
return(divclassName=box
divclassName=ballonTouchStart={this.fn.bind(this)}/div
divclassName=ballaconTouchStart={this.fn.bind(this)}/div
divclassName=line/div
divclassName=lineT/div
/div)
ReactDOM.render(Comp/,root)
/script
css样式：
style
body{
margin:0;
padding:0;
.box{
width:500px;
height:40px;
background:#999;
position:relative;
margin:auto;
margin-top:100px;
.ball{
width:40px;
height:40px;
background:red;
position:absolute;
border-radius:50%;
z-index:10;
.ball.ac{
background:#0f0;
right:0;
.line{
height:5px;
width:500px;
background:rgb(200,110,7);
position:absolute;
top:50%;
left:0;
transform:translate(0,-50%);
z-index:5;
.lineT{
height:5px;
width:500px;
background:#fff;
position:absolute;
top:50%;
left:0;
transform:translate(0,-50%);
/style
第二种方式：点击链接查看第二种
vue实现小球滑动交叉效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。