vue实现小球滑动交叉效果

 更新时间:2021年09月09日 14:47:33   作者:初夏七鹿  
这篇文章主要为大家详细介绍了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式

    vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式

    通过require动态引入, 发现报错:require is not defind,这是因为 require 是属于 Webpack 的方法,本文给大家介绍vue3+vite 动态引用静态资源及动态引入assets文件夹图片的多种方式,感兴趣的朋友一起看看吧
    2023-10-10
  • 解决element-ui的el-dialog组件中调用ref无效的问题

    解决element-ui的el-dialog组件中调用ref无效的问题

    这篇文章主要介绍了解决element-ui的el-dialog组件中调用ref无效的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vant-ui AddressEdit地址编辑和van-area的用法说明

    vant-ui AddressEdit地址编辑和van-area的用法说明

    这篇文章主要介绍了vant-ui AddressEdit地址编辑和van-area的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue3.0实践之写tsx语法实例

    vue3.0实践之写tsx语法实例

    很久不写博客了,最近在使用ts和tsx开发vue类项目,网上资料比较少,顺便记录一下方便同样开发的人互相学习共同进步,下面这篇文章主要给大家介绍了关于vue3.0实践之写tsx语法的相关资料,需要的朋友可以参考下
    2022-07-07
  • vue-cli或vue项目利用HBuilder打包成移动端app操作

    vue-cli或vue项目利用HBuilder打包成移动端app操作

    这篇文章主要介绍了vue-cli或vue项目利用HBuilder打包成移动端app操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • 在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作

    这篇文章主要介绍了在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • 关于Less在Vue中的使用方法介绍

    关于Less在Vue中的使用方法介绍

    最近发现好多小伙伴在面试的过程中会问到vue如何使用less和scss,所以下面这篇文章主要给大家介绍了关于Less在Vue中的使用方法,需要的朋友可以参考下
    2023-10-10
  • Vue中this.$nextTick()的理解与使用方法

    Vue中this.$nextTick()的理解与使用方法

    this.$nextTick是在下次dom更新循环之后执行延迟回调,在修改数据之后立即使用这个方法,获取更新后的dom,下面这篇文章主要给大家介绍了关于Vue中this.$nextTick()的理解与使用的相关资料,需要的朋友可以参考下
    2022-02-02
  • vue相关配置文件详解及多环境配置详细步骤

    vue相关配置文件详解及多环境配置详细步骤

    这篇文章主要介绍了vue相关配置文件详解及多环境配置的教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-05-05
  • vue.set() (this.$set)的用法及说明

    vue.set() (this.$set)的用法及说明

    这篇文章主要介绍了vue.set() (this.$set)的用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06

最新评论