Vue实现两个小球，线交叉

敬余生.

于 2021-08-30 20:48:02 发布

阅读量666

点赞数

CC 4.0 BY-SA版权

文章标签： html html5 javascript

本文链接：https://blog.youkuaiyun.com/weixin_57156917/article/details/120005216

本文介绍如何使用Vue框架结合HTML、JavaScript和CSS实现两个小球在线上交叉互动的视觉效果。通过JavaScript控制小球运动轨迹，CSS设置小球样式，结合Vue的响应式特性，创建动态交互的场景。

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

html部分

<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>

JavaScript部分

<script>
export default {
  data() {
    return {
      num: 0,
    };
  },
  methods: {
    fnstart(ev) {
      // 小球
      this.oDiv = ev.target;
      // console.log(this.oDiv.offsetLeft,2222)
      // pagx:鼠标点击的位置到页面最左边的距离            offsetLeft当前元素左边到最大盒子最左边
      this.pageX = ev.cha

最低0.47元/天解锁文章

200万优质内容无限畅学