React实现双滑块交叉滑动
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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实现小球滑动交叉效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
