React實現雙滑塊交叉滑動

Posted on by

本文實例為大傢分享瞭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實現小球滑動交叉效果

以上就是本文的全部內容，希望對大傢的學習有所幫助，也希望大傢多多支持WalkonNet。

推薦閱讀：