React实现双滑块交叉滑动

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

本文实例为大家分享了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实现小球滑动交叉效果

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