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>
第二种方式：点击链接查看第二种
vue实现小球滑动交叉效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
react-native 实现购物车滑动删除效果的示例代码
购物车的功能基本上电商项目都会有的,这是一篇关于react-native的,原生android的已经好久没写了.记得以前写原生购物车的时候,遇到过产品的灵魂质问,为啥iOS的滑动删除可以,android却那么难实现的.这个时候,我就打开微信说,android的微信版也是长按进行操作,iOS的是滑动操作的,两个平台自带的系统交互操作是不一样的.当然,最后还是默默的找各种三方库去进行滑动删除. rn的项目也是找的网上的一个三方库进行列表滑动操作的,github地址react-native-swipe
-
react-native滑动吸顶效果的实现过程
前言 最近公司开发方向偏向移动端,于是就被调去做RN(react-native),体验还不错,当前有个需求是首页中间吸顶的效果,虽然已经很久没写样式了,不过这种常见样式应该是so-easy,没成想翻车了,网上搜索换了几个方案都不行,最后去github上复制封装好的库来实现,现在把翻车过程记录下来. 需求效果 翻车过程 第一种方案 失败 一开始的思路是这样的,大众思路,我们需要监听页面的滚动状态,当页面滚动到要吸顶元素所处的位置的时候,我们设置它为固定定位,不过很遗憾,RN对于position属性
-
react的滑动图片验证码组件的示例代码
业务需求,需要在系统登陆的时候,使用"滑动图片验证码",来验证操作的不是机器人. 效果图 使用方式 在一般的页面组件引用即可.onReload这个函数一般是用来请求后台图片的. class App extends Component { state = { url: "" } componentDidMount() { this.setState({ url: getImage() }) } onReload = () => { this.setState({
-
React实现双滑块交叉滑动
本文实例为大家分享了React实现双滑块交叉滑动的具体代码,供大家参考,具体内容如下 html代码: <body> <div id="root"></div> </body> script代码: <script type="text/babel"> const root = document.querySelector('#root') class Comp extends React.Component
-
详解WPF双滑块控件的使用和强制捕获鼠标事件焦点
目录 效果 概述 代码部分 效果 概述 最近有个小需求要用双滑块表示一个取值范围,于是就简单做了个用户控件,在此记录下. 使用矩形Rectangle表示范围,椭圆Ellipse表示滑块,使用Canvas控制滑块的左右移动. 椭圆的鼠标按下事件里强制获取鼠标事件焦点,避免移动过快或移出控件范围时,滑块就不跟着跑了.椭圆的鼠标抬起事件释放强制获取鼠标事件焦点 代码部分 需求比较简单,只定义了4个依赖属性,范围的最大值和最小值,取值的最大值和最小值. 接下来就是计算滑块和高亮矩形的位置,计算时注意减去
-
vant遇到van-sidebar数据超出不能滑动的问题
目录 van-sidebar数据超出不能滑动 解决方法 最近项目中使用vant的一些总结 List 列表 vant一些内置api也很好用 vant中的toast等代码形式的样式需要额外引入 DatetimePicker 时间选择器 Slider 滑块 van-sidebar数据超出不能滑动 问题:项目中使用了van-popup弹出层加载子组件内容,子组件使用了van-sidebar侧边导航 解决方法 lock-scroll:是否锁定背景滚动 <van-popup v-model="show
-
React DOM diff 对比Vue DOM diff 区别详解
目录 React DOM diff 和 Vue DOM diff 的区别 React DOM diff 代码查看流程 总结 React DOM diff 和 Vue DOM diff 的区别 React 是从左向右遍历对比,Vue 是双端交叉对比. React 需要维护三个变量(我看源码发现是五个变量),Vue 则需要维护四个变量. Vue 整体效率比 React 更高,举例说明:假设有 N 个子节点,我们只是把最后子节点移到第一个,那么 React 需要进行借助 Map 进行 key 搜索找到
-
JS响应鼠标点击实现两个滑块区间拖动效果
本文实例讲述了JS实现的两个滑块区间拖动效果代码.分享给大家供大家参考,具体如下: 网页上的滑块功能如何实现呢?其实用JS就可以,这就是一个网页滑块,两个滑块可以任意拖动,形成一个滑块区间,而且代码兼容IE和其它主流的浏览器,两个滑块确定一个区间范围. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hkqj-td-style-codes/ 具体代码如下: <!DOCTYPE html> <html> <head>
-
Android仿IOS ViewPager滑动进度条
最近做项目,碰到如下的需求:ViewPager分页,如果是6页(包括6页)就用圆点,如果是6页以上就用进度条来切换.前面一种交互方法最常见,用小圆点来表示当前选中的页面,这些小圆点称为导航点,很多App都是这种实现方式.当用户第一次安装或升级应用时,都会利用导航页面告诉用户当前版本的主要亮点,一般情况下当行页面有三部分组成,背景图片,导航文字和滑动的原点,即下面的效果: 这里就不作详细的讲解,大家可以参考我以前写过的博客: ViewPager实现图片轮翻效果 今天来实现ViewPager进度条切
-
jQuery和hwSlider实现内容响应式可触控滑动切换效果附源码下载（二）
今天我们继续内容滑动切换效果的第二部分讲解.如今我们的web开发都要适应移动设备,就是说我们的web页面要在移动设备如手机端也能正常访问,所以我将第一部分的基本切换效果做了加强,增加了响应式和触控滑动效果. 效果展示 源码下载 本文是hwSlider-内容滑动切换效果的第二部分,演示DEMO都是基于第一部分内容的基础上的,所以,如果您还没阅读过第一部分的话,请先移步参阅:基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一) 响应式 什么是响应式设计,这里我就不描述了.
-
再分享70+免费的jquery 图片滑块效果插件和教程
jQuery Slider插件一般是由滑块与滑动按钮组成,也有一些带暂停和继续按钮的.一般使用的Slider滑块插件,按照展示方式,可以分为两种:一种是为水平滑动:另一种是垂直滑动.当然具体的特效就有很多种了,不一一解释了.大部分的都是一些类似幻灯片的效果,也有带视差效果的.实现方式也大都是基于jQuery+html5+CSS3,大部分插件的兼容性都不错. 之前其实已经分享过28款免费实用的 JQuery 图片和内容滑块插件,但是今天发现之前的草稿里面也存了一些不错的jQuery插件,而且数量还
-
jQuery插件slider实现拖动滑块选取价格范围
在一些产品报价网站上,需要给出一系列价格范围供用户筛选,我们在筛选的范围之外再加一个自定义价格范围,这样为用户多提供了一种选择方式.本文将使用jQuery插件结合CSS实现使用滑块滑动的方式选择价格范围,请看本文讲解. jQuery ui 有个slider插件,就是一个非常好使的拖动滑块插件.要想实现滑块拖动,需要在页面head间先载入如下js. <script type="text/javascript" src="js/jquery.js"><
-
jQuery蓝色风格滑动导航栏代码分享
这是一款基于jQuery蓝色风格滑动导航栏特效源码,实现滑块跟随鼠标左右滑动,和一般的导航相比很有动感,是一段超酷的导航栏滑动代码. 使用方法: 1.依次引入 nicenav.css.jQuery脚本库以及 jquery.nicenav.js 文件: 2.复制代码到页面中即可. 3.可以在代码中的 $.nicenav( )括号中设置滑块的滑动速度. 源码下载地址 为大家分享的jQuery蓝色风格滑动导航栏代码如下 <head> <style type="text/css&quo