vue实现小球滑动交叉效果

Lala ·

更新时间:2024-11-10

· 735 次阅读

本文实例为大家分享了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>

VUE 交叉

1024 个赞