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实现单向数据流的方法2023-04-04
这篇文章主要介绍了react中使用js实现页面滚动监听,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下2024-04-04
本文主要介绍了React服务端渲染和同构的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了详解React中setState回调函数，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了React 条件渲染的相关资料，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
React Native 中处理 Android 手机吞字的解决方案
这篇文章主要介绍了React Native 中处理 Android 手机吞字的解决方案,作者在 React Native 0.67.4 环境下，编写了一个小 demo 来复现这个问题，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了React Native提供自动完成的下拉菜单的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了React Native 混合开发多入口加载方式详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
在使用 React 进行开发过程中，或多或少使用过 Refs 进行 DOM 操作，这篇文章主要介绍了 Refs 功能和使用场景以及注意事项，希望对大家有所帮助2023-07-07
今天我们来学习React是如何构建起一个单页应用的，React作为目前最流行的前端框架之一，其受欢迎程度不容小觑，从这门框架上我们可以学到许多其他前端框架所缺失的东西，也是其创新性所在的地方，比如虚拟DOM、JSX等。下面一起来看看。2016-08-08
最新评论