开发笔记02：网站上漂浮窗撞来撞去效果

图片效果

代码如下(直接引入即可)：

或者作为vue文件二次封装直接引入也可以

<template>
  <div>
    //....
    <div id="sport_wrap" v-if="sportStatus" @mouseover="mouseOver" @mouseleave="mouseLeave">
      <div class="deleteImg">
        <div class="close"><i @click="showSport" class="el-icon-close"></i></div>
        <h3>这是内容</h3>
        <div class="content">
          <div>这是内容</div>
          <div>这是内容!</div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      sportStatus: false,
      moveX: 0, //X轴方向上移动的距离
      moveY: 0, //Y轴方向上移动的距离
      stepX: 1, //图片X轴移动的速度
      stepY: 1, //图片Y轴移动的速度
      directionX: 0, //设置图片在X轴方向上的移动方向   0:向右  1:向左
      directionY: 0, //设置图片在Y轴方向上的移动方向   0:向下  1:向上
      timer: null,

    };
  },
  mounted() {
    this.sportStatus = true
    this.timer = setInterval(() => {
      this.sportTranstion()
    }, 30);
  },
  beforeDestroy() {
    this.sportStatus = false
    clearInterval(this.timer)
  },
  methods: {
    sportTranstion() {
      let img = document.getElementById("sport_wrap"); //获得图片所在层的ID
      let height = document.documentElement.clientHeight; //浏览器的高度
      let width = document.documentElement.clientWidth; //浏览器的宽度
      let imgHeight = img.offsetHeight; //飘浮图片的高度
      let imgWidth = img.offsetWidth; //瓢浮图片的宽度
      //设置飘浮图片距离浏览器左侧位置
      img.style.left = parseInt(this.moveX + document.documentElement.scrollLeft) + "px";
      //设置飘浮图片距离浏览器右侧位置
      img.style.top = parseInt(this.moveY + document.documentElement.scrollTop) + "px";
      //设置图片在Y轴上的移动规律
      if (this.directionY == 0) {
        //飘浮图片在Y轴方向上向下移动
        this.moveY += this.stepY;
      } else {
        //飘浮图片在Y轴方向上向上移动
        this.moveY -= this.stepY;
      }
      if (this.moveY < 0) {
        //如果飘浮图片飘浮到顶端的时候，设置图片在Y轴方向上向下移动
        this.directionY = 0;
        this.moveY = 0;
      }
      if (this.moveY > (height - imgHeight - 10)) {
        //如果飘浮图片飘浮到浏览器底端的时候，设置图片在Y轴方向上向上移动
        this.directionY = 1;
        this.moveY = (height - imgHeight - 10);
      }
      //设置图片在X轴上的移动规律
      if (this.directionX == 0) {
        this.moveX += this.stepX;
      } else {
        this.moveX -= this.stepX;
      }
      if (this.moveX < 0) {
        //如果飘浮图片飘浮到浏览器左侧的时候，设置图片在X轴方向上向右移动
        this.directionX = 0;
        this.moveX = 0;
      }
      if (this.moveX > (width - imgWidth)) {
        //如果飘浮图片飘浮到浏览器右侧的时候，设置图片在X轴方向上向左移动
        this.directionX = 1;
        this.moveX = (width - imgWidth);
      }
    },
    showSport() {
      //关闭漂浮窗
      this.sportStatus = false
      clearInterval(this.timer)
    },

    mouseLeave() {
      //鼠标移入
      this.timer = setInterval(() => {
        this.sportTranstion()
      }, 30);
    },
    mouseOver() {
      //鼠标移出
      clearInterval(this.timer)
    },

  }
}
</script>
 
<style>
#sport_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  z-index: 1000;
  width: 200px;
  background-color: rgba(5, 105, 180, 0.9);
  height: 140px;
  cursor: pointer;
}
.close{
  font-size: 20px;
  color: #fff;
  text-align: right;
}
h3 {
  font-size: 18px;
  text-align: center;
  margin-bottom: 10px;
}
.content{
  font-size: 14px;
  color: #fff;
  font-weight: 700;
  text-align: center;
  height: 60px;
}
.content img {
  width: 100px;
  height: 100px;
}
.content p {
  flex: 1;
  font-size: 18px;
  color: #fff;
  margin-left: 20px;
}
.content p span {
  flex: 2;
}
.deleteImg {
  position: absolute;
  cursor: pointer;
}
</style>