vue怎么實現小球滑動交叉效果

這篇文章主要講解了“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>

感謝各位的閱讀，以上就是“vue怎么實現小球滑動交叉效果”的內容了，經過本文的學習后，相信大家對vue怎么實現小球滑動交叉效果這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！