vue的两个小球交互_vue 实现有交集的圆,有交互-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59097751/article/details/120005217

这篇博客展示了如何使用HTML和CSS结合JavaScript实现一个触摸滑动的动态效果。通过监听touchstart、touchmove和touchend事件，动态改变元素的位置，创建了一个可滑动的盒子组件。同时，CSS用于定义布局和样式，包括圆角、背景颜色和隐藏溢出等细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是html和css的代码

<template>
  <div class="home">
    <div class="dabox">
      <div class="xian"></div>
      <div class="xian ac" ref="hoxian"></div>
      <div class="box" @touchstart.prevent="FnState"></div>
      <div class="box ac" @touchstart.prevent="FnState"></div>
    </div>
  
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: "Home",
  data() {
    return {
  
    };
  },
  methods: {
    FnState(ev){
      this.PageX=ev.changedTouches[0].pageX - ev.target.offsetLeft


      this.parent=ev.target.parentNode
      this.child=ev.target.parentNode.children
      this.parentW=ev.target.parentNode.offsetWidth
      this.oW=this.parentW - ev.target.offsetWidth

      document.ontouchmove=this.More;
      document.ontouchend=this.End;

    },
    More(ev){
      this.X=ev.changedTouches[0].pageX - this.PageX

      if(this.X<=0)this.X=0
      if(this.X>=this.oW)this.X=this.oW

      for(var i=0 ;i<this.child.length;i++){

        if(this.child[i].classList.contains('box')){

          let len = this.child.length-2;
          if(i==len){
            this.dis=Math.abs(this.child[i].offsetLeft - this.child[i+1].offsetLeft)
            console.log(111)
            this.parent.children[1].style.width=this.dis + "px"
            if(this.child[i].offsetLeft - this.child[i+1].offsetLeft <0){
              this.child[1].style.left = this.child[i].offsetLeft + "px"

            }else{
              this.child[1].style.left =this.child[i+1].offsetLeft+"px"
            }
          }
        }
      }

  
     

      ev.target.style.left= this.X + "px"

    },
    End(){
      document.ontouchmove=null
      document.ontouchend=null
    }

  
  }
};
</script>

这是css的代码

<style lang="less" scoped>
.du {
  // width: 30px;
  // height: 30px;
  // background: #000;
  color: rgb(21, 72, 240);
  text-align: center;
  line-height: 30px;
  position: absolute;
  top: 70px;
  left: 170px;
}
.dabox {
  // background: b;
  height: 50px;
  width: 500px;
  margin-top: 100px;
  position: relative;
  left: 160px;
  overflow: hidden;
  .xian {
    width: 500px;
    height: 2px;
    background: #ccc;
    position: absolute;
    top: 50%;
    margin: auto;
  }

  .box {
    width: 50px;
    height: 50px;
    // margin-top: -25px;
    background: red;
    border-radius: 50%;
    position: absolute;
    //  overflow: hidden;
    // z-index: 2;
  }
  .ac {
    background: red;
  }
  .box.ac {
    width: 50px;
    height: 50px;
    // margin-top: -25px;
    background-color: aqua;
    //  box-shadow: 0 5px 5px rgb(0 0 0 / 50%);
    // overflow: hidden;
    border-radius: 50%;
    position: absolute;
    right: 0;
    // z-index: 2;
  }
}
</style>