vue中div模块左右滑动效果,vue实现左右滑动过渡效果
这篇文章主要为大家详细介绍了某视频剪辑软件实现小球滑动交叉，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了某视频剪辑软件实现小球滑动交叉效果的具体代码，供大家参考，具体内容如下
废话不多说直接上代码！
模板
div class="关于"
div class=box
！-默认线-
div class=Line/div
！-蓝色的线-
div class= slider-Line ref= slider-Line /div
！-左边小球-
div class= ball @触摸开始。prevent= fn start /div
！-右边小球-
div class= ball AC @触摸开始。prevent= fn start /div
！-上面的数字-
div class= num ref= num { { num } }/div
/div
/div
/模板
脚本代码：
脚本
导出默认值{
data() {
返回{
数字：0,
};
},
方法：{
fnstart(ev) {
//小球
这个。odiv=ev。目标；
//pagx:鼠标点击的位置到页面最左边的距离获取当前元素左边到最大盒子最左边
这个。pagex=ev。已更改触摸[0].pageX-这个。奥迪夫。向左偏移；
document.ontouchmove=this .FnMove
document.ontouchend=this .FnEnd
//父元素的宽度
这个。parent=ev。目标。父节点。offsetwidth
//减去小球的宽度
这个宽度=这个。父母-电动汽车。目标。offsetwidth
//获取父元素
这个。父母=ev。目标。父节点；
//获取子元素
这个。孩子=这个。父母。儿童；
//右边小球获取小球
这个.右=这个。父母。儿童[0]；
//左边小球
这个.左=这个。父母。儿童[1]；
},
FnMove(ev) {
//减去小球滑动的距离计算的是元素最左边，到浏览器最边上
这个X=ev.changedTouches[0]。pageX-这个。pageX
//console.log(这个. x，1010101)；
//判断小球等于零不能出去
如果（这个. X=0) {
这个. x=0；
}
//判断大于等于不让球出去
如果（这个10 . x这个。宽度){
这个. X=这个。宽度；
}
//让左边小球滑动，线跟着换颜色
//滑动上面的数值跟着变，分成100份
this.xnum=this .x/3.7；
//取整数
这个。num=parse int(this。xnum)；
这个. style.left=this .X6 px
//让小球相交不影响
//动态监测左右
for(var I=0；我这。童。长；i ) {
如果(这个。孩子[我]。班级名单。包含(球){
//一共5个元素减掉3就是蓝色线条的位置长度
设Len=这个。孩子。长度-3；
if (i==Len) {
//左边小球减右边小球取绝对值就是线条的宽
这个。dis=数学。ABS(这个。孩子(我).offsetLeft - this.child[i 1].向左偏移)；
//小球的宽度
这个。子[1]。风格。宽度=这个。dis px
//如果左边小球减掉右边小球的值小于0 蓝色线条的左边的就是左边小球的获取值
如果this.child[i].offsetLeft - this.child[i 1].offsetLeft 0) {
这个。子[1]。风格。左=这个。孩子[我].向左偏移“px”；
}否则{
//否则就是右边小球的获取值
这个。子[1]。风格。左=这个。孩子.向左偏移“px”；
}
}
}
}
this.oDiv.style.left=this .X px
},
FnEnd() {
document.ontouchmove=null
document.ontouchend=null
},
},
};
/脚本
半铸钢钢性铸铁(铸造半钢)代码：
style lang=less 范围。方框{
位置：相对；
宽度：400像素
高度：30px
背景色：rgb(240，16，83)；
顶配：50px
边距：自动；球
位置：绝对；
宽度：30px
高度：30px
背景色：粉色；
边界半径：50%;
z指数：2;
}。ball.ac {
右：0;
背景色：紫色；
}。行{
位置：绝对；
top:14px；
宽度：400像素
高度：2px
行高：30px
背景：# ccc
}。滑动线{
位置：绝对；
top:14px；
宽度：400像素
高度：2px
行高：30px
背景色：蓝色；
}。数量{
位置：绝对；
top:-19px；
左：9px
}
}
/风格
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。