react双滑块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../browser.js"></script>
    <script src="../react.js"></script>
    <script src="../react-dom.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .SliderBox{
            margin: 100px auto;
            width: 300px;
            height: 20px;
            background-color: aqua;
            position: relative;
        }
        .line{
            width: 300px;
            height: 5px;
            position: absolute;
            top: 8px;
            background-color: red;
        }
        .line.ac{
            background-color: #000;
        }
        .slider_left{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #ccc;
            position: absolute;
            left: 0;
        }
        .slider_right{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: blue;
            position: absolute;
            left: 280px;
        }
    </style>
</head>
<body>
    <div id="root">

    </div>
</body>
<script type="text/babel">
    class Slider extends React.Component{
        constructor(...props){
            super(...props)
        }
        SliderFn(e){
            // 获取鼠标点击的位置
            this.StartClick = e.changedTouches[0].pageX - e.target.offsetLeft
            // 获取父级
            this.parent = e.target.parentNode
            // 获取左侧滑块
            this.Left_slider = this.parent.children[2]
            // 获取右侧滑块
            this.Right_slider = this.parent.children[3]
            // 获取线条
            this.Line = this.parent.children[1]
            // 获取滑块可移动的距离
            this.MoveWidth = this.parent.offsetWidth - e.target.offsetWidth



            document.ontouchmove = this.MoveFn.bind(this)
            document.ontouchend = this.EndFn
        }

        MoveFn(e){
            // 获取相对起始位置移动的距离
            this.X = e.changedTouches[0].pageX - this.StartClick
            if(this.X<0){
                this.X=0
            }
            if(this.X>this.MoveWidth){
                this.X = this.MoveWidth
            }
            this.Line.style.width = Math.abs(this.Right_slider.offsetLeft - this.Left_slider.offsetLeft)+"px"
            if(this.Right_slider.offsetLeft - this.Left_slider.offsetLeft <0){
                this.Line.style.left = this.Right_slider.offsetLeft+"px"
            }else{
                this.Line.style.left = this.Left_slider.offsetLeft+"px"

            }
            e.target.style.left = this.X+"px"
        }

        EndFn(){
            document.ontouchmove = null
            document.ontouchend = null
        }

        render(){
            return (
                <div className="SliderBox">
                    <div className="line"></div>
                    <div className="line ac"></div>
                    <div className="slider_left" onTouchStart={this.SliderFn.bind(this)}></div>
                    <div className="slider_right" onTouchStart={this.SliderFn.bind(this)}></div>
                </div>
            )
        }
    }
    ReactDOM.render(<Slider />,document.querySelector("#root"))
</script>
</html>
react双滑块

相关文章
