React实现双滑块交叉滑动.docxVIP

第

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实现小球滑动交叉效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。