Vue.js组件开发-实现全屏图片文字缩放切换特效

news2025/2/2 23:42:14

使用 Vue 实现全屏图片文字缩放切换特效

步骤

创建 Vue 项目：使用 Vue CLI 来快速创建一个新的 Vue 项目。
设计组件结构：创建一个包含图片和文字的组件，并实现缩放和切换效果。
实现样式：使用 CSS 来实现全屏显示、缩放和切换动画。
编写 JavaScript 逻辑：处理图片和文字的切换，以及缩放效果的控制。

代码实现

1. 创建 Vue 项目

首先，确保已经安装了 Vue CLI。如果没有安装，可以使用以下命令进行安装：

npm install -g @vue/cli

然后创建一个新的 Vue 项目：

vue create fullscreen-image-text-switcher
cd fullscreen-image-text-switcher

2. 编写组件代码

在 src/components 目录下创建一个名为 FullscreenImageTextSwitcher.vue 的文件，内容如下：

<template>
  <div class="fullscreen-container">
    <!-- 显示当前图片 -->
    <img :src="currentImage" alt="Fullscreen Image" class="fullscreen-image" :style="{ transform: `scale(${scale})` }">
    <!-- 显示当前文字 -->
    <div class="fullscreen-text" :style="{ transform: `scale(${scale})` }">{{ currentText }}</div>
    <!-- 上一张按钮 -->
    <button @click="prevSlide" class="nav-button prev-button">Prev</button>
    <!-- 下一张按钮 -->
    <button @click="nextSlide" class="nav-button next-button">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 图片数组
      images: [
        'https://via.placeholder.com/1920x1080?text=Image+1',
        'https://via.placeholder.com/1920x1080?text=Image+2',
        'https://via.placeholder.com/1920x1080?text=Image+3'
      ],
      // 文字数组
      texts: [
        'This is the first slide.',
        'This is the second slide.',
        'This is the third slide.'
      ],
      // 当前图片和文字的索引
      currentIndex: 0,
      // 缩放比例
      scale: 1
    };
  },
  computed: {
    // 获取当前图片的 URL
    currentImage() {
      return this.images[this.currentIndex];
    },
    // 获取当前文字内容
    currentText() {
      return this.texts[this.currentIndex];
    }
  },
  methods: {
    // 切换到上一张图片和文字
    prevSlide() {
      this.animateScale();
      this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
    },
    // 切换到下一张图片和文字
    nextSlide() {
      this.animateScale();
      this.currentIndex = (this.currentIndex + 1) % this.images.length;
    },
    // 实现缩放动画
    animateScale() {
      this.scale = 0.8;
      setTimeout(() => {
        this.scale = 1;
      }, 300);
    }
  }
};
</script>

<style scoped>
.fullscreen-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fullscreen-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.fullscreen-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 24px;
  text-align: center;
  transition: transform 0.3s ease;
}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 10;
}

.prev-button {
  left: 20px;
}

.next-button {
  right: 20px;
}
</style>

3. 在 `App.vue` 中使用组件

打开 src/App.vue 文件，将其内容替换为以下代码：

<template>
  <div id="app">
    <!-- 使用 FullscreenImageTextSwitcher 组件 -->
    <FullscreenImageTextSwitcher />
  </div>
</template>

<script>
// 引入 FullscreenImageTextSwitcher 组件
import FullscreenImageTextSwitcher from './components/FullscreenImageTextSwitcher.vue';

export default {
  name: 'App',
  components: {
    FullscreenImageTextSwitcher
  }
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

代码注释

模板部分：
- <img> 标签用于显示当前图片，通过 :src 绑定 currentImage 数据，transform 样式根据 scale 数据实现缩放效果。
- <div> 标签用于显示当前文字，同样通过 transform 样式实现缩放效果。
- <button> 标签用于切换上一张和下一张图片和文字，分别绑定 prevSlide 和 nextSlide 方法。
脚本部分：
- data 函数返回组件的数据，包括图片数组、文字数组、当前索引和缩放比例。
- computed 属性用于计算当前图片和文字的内容。
- methods 包含切换图片和文字的方法 prevSlide 和 nextSlide，以及实现缩放动画的方法 animateScale。
样式部分：
- .fullscreen-container 设置为全屏显示，并隐藏溢出内容。
- .fullscreen-image 和 .fullscreen-text 使用 transition 属性实现缩放动画。
- .nav-button 设置导航按钮的样式。