<!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>