FloatWindow网页悬浮窗

亲测可用！

<template>
    <div class="adbox" ref="adbox" v-show="showAdbox" @mouseenter="enterbox" @mouseleave="leavebox">
        <b style="float:right;cursor:pointer;margin-right:5px;" @click="closebox">×</b>
        <div>广告位招租</div>
    </div>
</template>

<script>
export default{
    name: 'FloatWindow',
    data(){
        return {
            x:50,
            y:50,
            xin:true,
            yin:true,
            step:1,
            delay:20, // 移动速度
            itl:null,
            showAdbox:true
        }
    },
    mounted: function(){
        this.routeEnterShowAdbox();
    },
    destroyed: function(){
        clearInterval(this.itl);
    },
    methods:{
        closebox(){
            this.showAdbox = false;
            clearInterval(this.itl)
        },
        leavebox(){
            if(this.showAdbox== false){
                clearInterval(this.itl)
            }else{
                this.itl=setInterval(this.movebox, this.delay)
            }
        },
        enterbox(){
            clearInterval(this.itl)
        },
        movebox() {
            var L = 0;
            var T = 0;
            var R = document.documentElement.clientWidth - this.$refs.adbox.offsetWidth;    //浏览器显示宽度-adbox宽度，不随滚动条变化而变化
            var B = document.documentElement.clientHeight - this.$refs.adbox.offsetHeight;  //浏览器显示高度-adbox高度，不随滚动条变化而变化
            this.$refs.adbox.style.left = this.x + document.documentElement.scrollLeft + "px";  //adbox初始左+滚动条最左端到浏览器最左端的距离
            this.$refs.adbox.style.top = this.y + document.documentElement.scrollTop + "px";    //adbox初始高+滚动条顶端到浏览器顶端的距离
            this.x = this.x + this.step * (this.xin ? 1 : -1);
            if (this.x < L) {this.xin = true;this.x = L;}
            if (this.x > R) {this.xin = false;this.x = R;}
            this.y = this.y + this.step * (this.yin ? 1 : -1);
            if (this.y < T) {this.yin = true;this.y = T;}
            if (this.y > B) {this.yin = false;this.y = B;}
        },
        routeEnterShowAdbox(){
            this.itl=setInterval(this.movebox, this.delay)
        },
    },
}
</script>

<style lang="scss" scoped>
.adbox{
    width: 400px;
    height: 300px;
    position:  absolute;
    z-index: 999;
    border: 1px solid red;
}
</style>

 

border: 1px solid red;