vue实现小球滑动交叉效果
作者:初夏七鹿 时间:2024-04-30 10:30:09
本文实例为大家分享了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>
来源:https://blog.csdn.net/m0_58875967/article/details/119857178
标签:vue,滑动,交叉
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
python安装mysql-python简明笔记(ubuntu环境)
2024-01-14 17:49:17
关于PyQt5主窗口图标显示问题汇总
2022-03-27 08:23:18
![](https://img.aspxhome.com/file/2023/9/85029_0s.png)
详解Ubuntu Server下启动/停止/重启MySQL数据库的三种方式
2024-01-26 12:42:11
关于JavaScript数组去重的一些理解汇总
2024-05-02 16:17:56
![](https://img.aspxhome.com/file/2023/7/132707_0s.png)
python爬虫学习笔记之Beautifulsoup模块用法详解
2022-06-27 12:30:03
![](https://img.aspxhome.com/file/2023/2/97122_0s.png)
django之自定义软删除Model的方法
2023-11-17 21:31:12
使用Python3制作TCP端口扫描器
2023-06-10 17:25:22
![](https://img.aspxhome.com/file/2023/7/124377_0s.png)
Python NLP开发之实现聊天机器人
2021-12-21 18:04:48
![](https://img.aspxhome.com/file/2023/1/66851_0s.png)
Django的分页器实例(paginator)
2023-06-23 03:22:35
通过python顺序修改文件名字的方法
2023-05-20 08:05:29
![](https://img.aspxhome.com/file/2023/9/127829_0s.jpg)
perl的格式化(Format)报表输出实现代码
2022-02-10 09:43:47
PHP5在Apache下的两种模式的安装
2023-11-24 05:18:08
关于numpy和torch.tensor的张量的操作
2023-12-30 23:35:25
Blazor Server 应用程序中进行 HTTP 请求
2024-01-24 07:56:38
![](https://img.aspxhome.com/file/2023/6/92766_0s.jpg)
一文彻底理解JS回调函数
2024-04-10 10:52:10
![](https://img.aspxhome.com/file/2023/9/136889_0s.png)
python简单实现刷新智联简历
2023-09-08 06:49:44
Python读取文件内容为字符串的方法(多种方法详解)
2023-05-18 18:16:27
python数组的复制与列表中的pop
2021-07-10 12:05:24
![](https://img.aspxhome.com/file/2023/4/67944_0s.png)
设置SQLServer数据库中某些表为只读的多种方法分享
2012-07-11 15:41:05
Python wxPython库Core组件BoxSizer用法示例
2023-01-17 23:08:32
![](https://img.aspxhome.com/file/2023/9/102859_0s.png)