Vue飘窗效果（css飘窗效果，跟随页面滚动）

简述：飘窗效果，相信大家都见过，一般用于官网页面，下面给大家整理了下，飘窗效果在vue中的使用，效果图如下；

1、话不多说，直接上代码，HTML部分；

<template>
  <!-- 飘窗效果 -->
  <div
    id="thediv"
    ref="thediv"
    v-show="thedivShow"
    @mouseover="clearFdAd"
    @mouseout="starFdAd"
  >
    <div
      style="
        cursor: pointer;
        text-align: right;
        font-size: 12px;
        color: #999999;
      "
      @click="thedivShow = false"
    >
      关闭
    </div>
    <a href="http://www.baidu.com" target="_blank">
      //飘窗内容部分 图片或者视频 等等
      <!-- <img src="../assets/logo.png" width="320" border="0" /> -->
      <div class="tips" v-for="(cur, i) in defineIndexInfo" :key="i">
        <div v-html="cur.noticeContent"></div>
      </div>
    </a>
  </div>
</template>

2、CSS

#thediv {
  z-index: 100;
  position: absolute;
  top: 0px;
  left: 0px;
}

3、JS(vue.js)

  data() {
    return {
      //定义相关参数
      xPos: 0,
      yPos: 0,
      xin: true,
      yin: true,
      step: 3,
      delay: 18,
      height: 0,
      Hoffset: 0,
      Woffset: 0,
      yon: 0,
      xon: 0,
      pause: true,
      thedivShow: true,
    };
  },

  created() {
    this.callLabList();//调用执行
  },
  mounted() {
    interval = setInterval(this.changePos, this.delay);
  },
  methods: {
    //滚动逻辑方法
    changePos() {
      let width = document.documentElement.clientWidth;
      let height = document.documentElement.clientHeight;
      if (this.$refs.thediv) {
        this.Hoffset = this.$refs.thediv.offsetHeight; //获取元素高度
        this.Woffset = this.$refs.thediv.offsetWidth;
        // 滚动部分不随屏幕滚动
        this.$refs.thediv.style.left =
          this.xPos + document.body.scrollLeft + "px";
        this.$refs.thediv.style.top =
          this.yPos + document.body.scrollTop + "px";

        if (this.yon) {
          this.yPos = this.yPos + this.step;
        } else {
          this.yPos = this.yPos - this.step;
        }
        if (this.yPos < 0) {
          this.yon = 1;
          this.yPos = 0;
        }
        if (this.yPos >= height - this.Hoffset) {
          this.yon = 0;
          this.yPos = height - this.Hoffset;
        }

        if (this.xon) {
          this.xPos = this.xPos + this.step;
        } else {
          this.xPos = this.xPos - this.step;
        }
        if (this.xPos < 0) {
          this.xon = 1;
          this.xPos = 0;
        }
        if (this.xPos >= width - this.Woffset) {
          this.xon = 0;
          this.xPos = width - this.Woffset;
        }
      }
      // 滚动时跟随屏幕滚动 需要时解开注释
      // this.$refs.thediv.style.left = (this.xPos +
 //document.body.scrollLeft + document.documentElement.scrollLeft) + "px";
      // this.$refs.thediv.style.top = (this.yPos +
 //document.body.scrollTop + document.documentElement.scrollTop) + "px";
    },
    clearFdAd() {
      clearInterval(interval);
    },
    starFdAd() {
      interval = setInterval(this.changePos, this.delay);
    },
  },

4、组件引入调用；

import Baywindow from "@/components/Baywindow.vue";

components: {
    Baywindow,
  },

<!-- 飘窗 -->
<Baywindow/>

感觉有用，就一键三连，感谢(●'◡'●)