当前位置：首页 > VUE

vue实现漂浮广告

2026-02-19 20:48:45VUE

Vue 实现漂浮广告

在 Vue 中实现漂浮广告可以通过动态绑定样式、监听窗口滚动事件以及使用 CSS 动画来实现。以下是具体实现方法：

使用动态样式绑定

通过 Vue 的 v-bind:style 动态绑定广告元素的位置，结合 position: fixed 或 position: absolute 实现漂浮效果。

vue实现漂浮广告

<template>
  <div class="ad-container" :style="{ top: adTop + 'px', left: adLeft + 'px' }">
    <img src="ad-image.png" alt="广告" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      adTop: 100,
      adLeft: 100,
    };
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    handleScroll() {
      this.adTop = window.scrollY + 100;
    },
  },
};
</script>

<style>
.ad-container {
  position: fixed;
  z-index: 999;
}
</style>

使用 CSS 动画

通过 CSS 的 @keyframes 实现广告的漂浮动画效果。

vue实现漂浮广告

<template>
  <div class="floating-ad">
    <img src="ad-image.png" alt="广告" />
  </div>
</template>

<style>
.floating-ad {
  position: fixed;
  bottom: 20px;
  right: 20px;
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
</style>

结合 Vue Transition

使用 Vue 的 <transition> 组件实现广告的淡入淡出效果。

<template>
  <transition name="fade">
    <div v-if="showAd" class="ad-container">
      <img src="ad-image.png" alt="广告" @click="closeAd" />
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      showAd: true,
    };
  },
  methods: {
    closeAd() {
      this.showAd = false;
    },
  },
};
</script>

<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.ad-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
}
</style>

使用第三方库

如果需要更复杂的动画效果，可以引入第三方库如 gsap 或 anime.js。

<template>
  <div ref="ad" class="ad-container">
    <img src="ad-image.png" alt="广告" />
  </div>
</template>

<script>
import { gsap } from 'gsap';

export default {
  mounted() {
    gsap.to(this.$refs.ad, {
      duration: 2,
      x: 100,
      y: 50,
      repeat: -1,
      yoyo: true,
    });
  },
};
</script>

<style>
.ad-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
}
</style>