| 本文实例为大家分享了React实现双滑块交叉滑动的具体代码，供大家参考，具体内容如下 html代码： <body> <div id="root"></div></body> script代码： <script type="text/babel"> const root = document.querySelector('#root') class Comp extends React.Component { constructor(...args) { super(...args) } fn(ev) { // 获取鼠标点击的距离 this.pageX = ev.changedTouches[0].pageX - ev.target.offsetLeft // 获取父级 this.parentWidth = ev.target.parentNode.offsetWidth - ev.target.offsetWidth // 获取父级 this.parent = ev.target.parentNode // 获取线条 this.line = this.parent.children[2] // 获取左边小球 this.oBall = this.parent.children[0] // 右边小球 this.oBallTwo = this.parent.children[1] document.ontouchmove = this.fnMove.bind(this) document.ontouchend = this.fnEnd } fnMove(ev) { // 盒子偏移量 this.X = ev.changedTouches[0].pageX - this.pageX // 判断偏移量不能大于父盒子的宽 if (this.X >= this.parentWidth) { this.X = this.parentWidth } // 判断不能小于0 if (this.X <= 0) { this.X = 0 } // 计算线条的宽 小球交互 计算绝对值就是线条的宽 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.offsetLeft<0){ 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 (<div className='box'> <div className='ball' onTouchStart={this.fn.bind(this)}></div> <div className='ball ac' onTouchStart={this.fn.bind(this)}></div> <div className='line'></div> <div className='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实现小球滑动交叉效果 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
vue实现小球滑动交叉效果
react native之ScrollView下拉刷新效果 |
