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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程宝库。

当你在发送网络请求的时候，出现以下保存信息，恭喜你跨域了Access to XMLHttpRequest at 'XXXXX' from origin 'XXXXXX' has been blocked ...