• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

React实现双滑块交叉滑动

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了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实现小球滑动交叉效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持极客世界。


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue实现小球滑动交叉效果发布时间:2022-02-05
下一篇:
react native之ScrollView下拉刷新效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap