Vue 实现PC端飘窗动画效果

目录

一、实现效果

二、实现步骤

三、在父组件中引入 MoveWindow, 注册并使用

四、完整代码


一、实现效果

二、实现步骤

 1. 创建  MoveWindow 组件,飘窗其实就是一个运动的div        


2.通过show属性来控制飘窗的显示和隐藏

   stepX 和 stepY 来控制水平方向和垂直方向的步长

   maxTop 和 maxLeft 表示最大的 top 值 和 left 值

   top 和 left 表示 飘窗的初始位置 

    


3、创建飘窗移动函数

当发生碰撞检测时,飘窗往相反方向运动


4、初始化飘窗

      设置最大的top和left值:根元素可视区域宽高 - 飘窗的宽高 - 边距 

      设置 top 和 left 的初始值

      创建定时器前清除定时器,避免产生多个定时器


5、当鼠标移入飘窗时,清除定时器,飘窗停止运动


6、 当鼠标离开飘窗时恢复运动


7、当窗口大小调整时重置飘窗规则


8、关闭飘窗时,清除定时器并隐藏飘窗

三、在父组件中引入 MoveWindow, 注册并使用

四、完整代码

<template>
  <div>
    <div
      v-if="show"
      @mouseover="mouseover"
      @mouseout="mouseout"
      class="box"
      :style="{ top: top + 'px', left: left + 'px' }"
    >
      <span @click="close"><a-icon type="close-circle" /></span>
      <div>{{ content }}</div>
    </div>
  </div>
</template>

<style scoped>
.box {
  background: #6e86f2;
  width: 200px;
  height: 150px;
  border-radius: 5px;
  position: fixed;
  text-align: left;
  padding: 10px;
  color: #ffffff;
  top: 0;
  left: 0;
}
.box > span {
  text-align: right;
  position: absolute;
  right: 10px;
  top: 10px;
  color: #1b1d20;
  cursor: pointer;
}

.box > div {
  margin-top: 30px;
}
</style>
<script>
export default {
  name: 'MoveWindow',
  props: {
    content: {
      default: '友情提示:这是一个飘窗测试,鼠标悬浮停止运动。',
    },
  },
  data() {
    return {
      show: true,
      stepX: 1,
      stepY: 1,
      timer: null,
      maxTop: 0,
      maxLeft: 0,
      top: 0,
      left: 0,
    }
  },
  mounted() {
    this.init()
  },
  beforeDestroy() {
    // dom 销毁前清除定时器
    clearInterval(this.timer)
  },
  methods: {
    init() {
      this.maxTop = document.documentElement.clientHeight - 150 - 5
      this.maxLeft = document.documentElement.clientWidth - 200 - 5
      this.top = 0
      this.left = 0
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.move()
      }, 20)
      this.onresize()
    },

    // 移动函数

    move() {
      if (this.top >= this.maxTop || this.top < 0) {
        this.stepY = -this.stepY
      }
      if (this.left >= this.maxLeft || this.left < 0) {
        this.stepX = -this.stepX
      }
      this.top += this.stepY
      this.left += this.stepX
    },

    mouseover() {
      clearInterval(this.timer)
    },

    mouseout() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.move()
      }, 20)
    },

    close() {
      clearInterval(this.timer)
      this.show = false
    },

    onresize() {
      const that = this
      window.onresize = function () {
        that.init()
      }
    },
  },
}
</script>
<template>
  <div>
    <MoveWindow />
  </div>
</template>

<script>
import MoveWindow from './components/MoveWindow.vue'

export default {
  components: { MoveWindow },
}
</script>

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值