React实现双滑块交叉滑动
更新时间：2021年09月09日 15:03:16 作者：燃烧的冰山..
这篇文章主要为大家详细介绍了React实现双滑块交叉滑动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
第二种方式：点击链接查看第二种
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React路由规则的定义、声明式导航、编程式导航，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-09-09
使用webpack配置react-hot-loader热加载局部更新
这篇文章主要介绍了使用webpack配置react-hot-loader热加载局部更新，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
本篇文章主要介绍了React-Router如何进行页面权限管理的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
本篇文章通过完整的代码给大家介绍了react-player实现视频播放与自定义进度条效果，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2022-01-01
Context提供了一个无需为每层组件手动添加props，就能在组件树间进行数据传递的方法。在一个典型的 React 应用中，数据是通过props属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的2022-12-12
这篇文章主要介绍了React中使用UMEditor的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本文主要介绍了react中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
这篇文章主要介绍了react 中 mobx的使用案例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
这篇文章主要介绍了React 父组件和子组件的数据传输的相关资料，帮助大家更好的理解和学习使用React，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了react中braft-editor的基本使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论