vue实现小球滑动交叉效果
程序员文章站
2022-08-26 18:50:14
本文实例为大家分享了vue实现小球滑动交叉效果的具体代码，供大家参考，具体内容如下废话不多说 直接上代码！
...
本文实例为大家分享了vue实现小球滑动交叉效果的具体代码，供大家参考，具体内容如下
废话不多说 直接上代码！
<template>
<div class="about">
<div class="box">
<!-- 默认线 -->
<div class="line"></div>
<!-- 蓝色的线 -->
<div class="slider-line" ref="slider-line"></div>
<!-- 左边小球 -->
<div class="ball" @touchstart.prevent="fnstart"></div>
<!-- 右边小球 -->
<div class="ball ac" @touchstart.prevent="fnstart"></div>
<!-- 上面的数字 -->
<div class="num" ref="num">{{ num }}</div>
</div>
</div>
</template>
script代码：
<script>
export default {
data() {
return {
num: 0,
};
},
methods: {
fnstart(ev) {
// 小球
this.odiv = ev.target;
// pagx:鼠标点击的位置到页面最左边的距离 offsetleft当前元素左边到最大盒子最左边
this.pagex = ev.changedtouches[0].pagex - this.odiv.offsetleft;
document.ontouchmove = this.fnmove;
document.ontouchend = this.fnend;
// 父元素的宽度
this.parent = ev.target.parentnode.offsetwidth;
// 减去小球的宽度
this.width = this.parent - ev.target.offsetwidth;
//获取父元素
this.parents = ev.target.parentnode;
//获取子元素
this.child = this.parents.children;
// 右边小球 获取小球
this.right = this.parents.children[0];
// 左边小球
this.left = this.parents.children[1];
},
fnmove(ev) {
// 减去小球滑动的距离 计算的是元素最左边，到浏览器最边上
this.x = ev.changedtouches[0].pagex - this.pagex;
// console.log(this.x, 1010101);
// 判断小球等于零不能出去
if (this.x <= 0) {
this.x = 0;
}
// 判断大于等于不让球出去
if (this.x > this.width) {
this.x = this.width;
}
// 让左边小球滑动，线跟着换颜色
//滑动上面的数值跟着变，分成100份
this.xnum = this.x / 3.7;
// 取整数
this.num = parseint(this.xnum);
this.$refs["num"].style.left = this.x + 6 + "px";
// 让小球相交不影响
// 动态监测左右
for (var i = 0; i < this.child.length; i++) {
if (this.child[i].classlist.contains("ball")) {
// 一共5个元素 减掉3就是 蓝色线条的位置 length
let len = this.child.length - 3;
if (i == len) {
// 左边小球减右边小球取绝对值就是线条的宽
this.dis = math.abs( this.child[i].offsetleft - this.child[i + 1].offsetleft );
// 小球的宽度
this.child[1].style.width = this.dis + "px";
// 如果左边小球减掉右边小球的值小于0 蓝色线条的left就是左边小球的offsetleft值
if (this.child[i].offsetleft - this.child[i + 1].offsetleft < 0) {
this.child[1].style.left = this.child[i].offsetleft + "px";
} else {
// 否则就是右边小球的offsetleft值
this.child[1].style.left = this.child[i + 1].offsetleft + "px";
}
}
}
}
this.odiv.style.left = this.x + "px";
},
fnend() {
document.ontouchmove = null;
document.ontouchend = null;
},
},
};
</script>
css代码：
<style lang="less" scoped>
.box {
position: relative;
width: 400px;
height: 30px;
background-color: rgb(240, 16, 83);
top: 50px;
margin: auto;
.ball {
position: absolute;
width: 30px;
height: 30px;
background-color: pink;
border-radius: 50%;
z-index: 2;
}
.ball.ac {
right: 0;
background-color: purple;
}
.line {
position: absolute;
top: 14px;
width: 400px;
height: 2px;
line-height: 30px;
background: #ccc;
}
.slider-line {
position: absolute;
top: 14px;
width: 400px;
height: 2px;
line-height: 30px;
background-color: blue;
}
.num {
position: absolute;
top: -19px;
left: 9px;
}
}
</style>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。