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

妖狐艹你老母 2023-10-04 22:03 43阅读 0赞

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

![bc01fa64861b47499b8c32269b085ed2.gif][]

####  ####

#### 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">
          //飘窗内容部分 图片或者视频 等等
          
          <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/>

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

[bc01fa64861b47499b8c32269b085ed2.gif]: https://img-blog.csdnimg.cn/bc01fa64861b47499b8c32269b085ed2.gif