开发笔记：会飞的浮窗

需求：开发一个在页面中来回飞的窗口   吸引眼球

如：

在它碰到上下左右四个边框时会反弹

具体描述如下：

页面内展示一个通知飘窗，该飘窗在网页任意位置移动，飘窗移动轨迹随机，但不可超出网页边界。当飘窗移动到网页边界时，应该反弹并继续移动。显示内容为最新的招标公告，飘窗内通知滚动显示。飘窗内右上角位置显示关闭按钮，点击后飘窗消失。当鼠标触碰到飘窗时，飘窗停止移动；当鼠标离开飘窗后，飘窗按照原来的轨迹
继续移动。

结构:

<div class="window" @mouseover="mouseover()" @mouseout="mouseout()" :style="        {top:top+'px',left:left+'px'}" v-show="showMoveWindow">
      <span style="float: right; margin-right: 5px; font-weight: bold; cursor: pointer;" @click="showMoveWindow = false">X</span>
      <marquee style="margin-top: 20px; border: 1px white solid; padding: 10px">
        {{ moveTitle }}
      </marquee>
</div>



data(){
	return{
	   //开始的top值
      top:0,
      //开始的left值
      left:0,
      //无数据时跑马灯的内容
      moveTitle:'暂无公告',
      //开启的定时器
      timer:{},
      //横向移动的速递
      speedX:2,
      //纵向移动的速度
      speedY:2
	}
}

//在生命周期钩子创建好的时候调用移动：
created(){
	this.move();
}


//鼠标悬浮在改浮窗的时候： 清除定时器
 mouseover(){
    //鼠标悬浮时 清除定时器
    clearInterval(this.timer);
 },
 
 //鼠标离开窗口的时候 重新开启一个定时器
 mouseout(){
     //鼠标离开时 开始计时器
     this.move();
 },
 
 //定时器: （移动的具体操作）
 move(){
	//开启一个定时器  并将其赋值给data数据中
    this.timer = setInterval(()=>{
      //浮窗 距离顶部的距离
      this.top += this.speedY;
      //浮窗 距离左侧的距离
      this.left += this.speedX;
	  //当浮窗飘到页面最右（减去自身的宽度，因为这里是算浮窗的右边宽到页面右边宽的距离，所以要减去自身的宽度，才可以算右边宽是否达到） 或者  飘到页面最左边的时候  将speedX 取反
      if(this.left >= window.innerWidth - 240 || this.left < 0){
        this.speedX = -this.speedX;
      }
	 //当浮窗飘到页面最下（减去自身的高度，因为这里是算浮窗的下边宽到页面下边宽的距离，所以要减去自身的高度，才可以算下边宽是否达到） 或者  飘到页面最上边的时候  将speedY 取反
      if(this.top >= window.innerHeight - 120 || this.top < 0){
        this.speedY = -this.speedY;
      }
    },20);
   }



<style scoped lang="scss">
    .window{
      padding: 0 10px; 
      box-sizing: border-box; 
      background: rgb(199, 243, 237); 
      width: 240px;
      height: 120px;
      border-radius: 10px;
      z-index: 999;
      position: fixed;
    }
</style>

在这里解释一下：speedX和speedY：

speedX和speedY在这段代码中用于控制物体在水平和垂直方向上的运动速度。

speedX表示物体在水平方向上的速度，通过改变this.left的值来实现物体在水平方向上的移动。如果speedX为正值，物体向右移动；如果speedX为负值，物体向左移动。
speedY表示物体在垂直方向上的速度，通过改变this.top的值来实现物体在垂直方向上的移动。如果speedY为正值，物体向下移动；如果speedY为负值，物体向上移动。