[绍棠] 悬浮广告 vue版本

最新推荐文章于 2022-03-20 00:42:21 发布

绍棠

最新推荐文章于 2022-03-20 00:42:21 发布

阅读量206

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/happyshaotang2/article/details/117124076

本文详细介绍了如何在Vue项目中实现悬浮广告功能，从组件创建到定位技巧，涵盖核心代码示例，帮助开发者理解并应用到自己的项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="adRight" id="adRight">
        <div class="adItem" v-for="(item, index) in lists2" :key="index">
          <img @click="handleClickPushADAction(item)" :src="item.src" v-if="item.isShow == 1"/>
          <div @click="handleClickLeftADAction(item)" v-if="item.isShow == 1">关闭</div>
        </div>
    </div>
</template>

mounted() {
   this.params();
}


methods: {
    params() {
        let count = 101;        //速度
        let stepX = 5;
        let stepY = 5;
        // let img = document.getElementById('img');
        let img = document.getElementById('adRight');
        let imgWidth = img.offsetWidth;
        let imgHeight = img.offsetHeight;
        let clientw = document.body.clientWidth; //1903（不包含滚动条）
        let clienth = document.body.clientHeight; //866（不包含工具条）
        let x = parseInt(img.getBoundingClientRect().left);
        let y = parseInt(img.getBoundingClientRect().top);
        th