vue實現(xiàn)小球滑動交叉效果

更新時間：2021年09月09日 14:47:33 作者：初夏七鹿

這篇文章主要為大家詳細介紹了vue實現(xiàn)小球滑動交叉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)小球滑動交叉效果的具體代碼，供大家參考，具體內(nèi)容如下

廢話不多說直接上代碼！

<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>
      <!-- 上面的數(shù)字 -->
      <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;
      }
      // 讓左邊小球滑動，線跟著換顏色
 
      //滑動上面的數(shù)值跟著變，分成100份
      this.xnum = this.X / 3.7;
      // 取整數(shù)
      this.num = parseInt(this.xnum);
      this.$refs["num"].style.left = this.X + 6 + "px";
 
 
      // 讓小球相交不影響
      // 動態(tài)監(jiān)測左右
      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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: