当前位置：首页 > news >正文

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

news 来源：原创 2025/5/19 10:12:40

使用 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: {// 获取当前图片的 URLcurrentImage() {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 设置导航按钮的样式。

使用说明

启动开发服务器：在项目根目录下运行以下命令启动开发服务器。

npm run serve

访问应用：打开浏览器，访问 http://localhost:8080，即可看到全屏图片文字缩放切换特效。
切换图片和文字：点击页面左右两侧的 Prev 和 Next 按钮，即可切换图片和文字，并触发缩放动画。

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

使用 Vue 实现全屏图片文字缩放切换特效步骤创建 Vue 项目：使用 Vue CLI 来快速创建一个新的 Vue 项目。设计组件结构：创建一个包含图片和文字的组件，并实现缩放和切换效果。实现样式：使用 CSS 来实现全屏显示、缩放和切换动画…...

编程日记 2025/5/19 10:12:40

在 WSL2 中重启 Ubuntu 实例

在 WSL2 中重启 Ubuntu 实例，可以按照以下步骤操作： 方法 1: 使用 wsl 命令关闭 Ubuntu 实例: 打开 PowerShell 或命令提示符，运行以下命令： wsl --shutdown这会关闭所有 WSL2 实例。重新启动 Ubuntu: 再次打开 Ubuntu&#x…...

编程日记 2025/5/14 18:05:13

Flutter 新春第一弹，Dart 宏功能推进暂停，后续专注定制数据处理支持

在去年春节，Flutter 官方发布了宏（Macros）编程的原型支持， 同年的 5 月份在 Google I/O 发布的 Dart 3.4 宣布了宏的实验性支持，但是对于 Dart 内部来说，从启动宏编程实验开始已经过去了几年，但…...

编程日记 2025/5/15 3:10:30

打开得到加密脚本： import ecdsa import randomdef ecdsa_test(dA,k):sk ecdsa.SigningKey.from_secret_exponent(secexpdA,curveecdsa.SECP256k1)sig1 sk.sign(databHi., kk).hex()sig2 sk.sign(databhello., kk).hex()r1 int(sig1[:64], 16)s1 int(sig1[64:…...

编程日记 2025/5/14 6:59:02

UE求职Demo开发日志#18 数据表获取物品信息，添加背包模块

1 把获取物品信息改为读取数据表先创建结构，暂时有这几个属性： USTRUCT(BlueprintType) struct ARPG_CPLUS_API FMyItemData:public FTableRowBase {GENERATED_USTRUCT_BODY()UPROPERTY(EditAnywhere, BlueprintReadWrite)int ItemId;//物品Id&#x…...

编程日记 2025/5/19 3:02:20

neo4j-community-5.26.0 create new database

1.edit neo4j.conf 把 # The name of the default database initial.dbms.default_databasehonglouneo4j # 写上自己的数据库名称和 # Name of the service #5.0 server.windows_service_nameneo4j #4.0 dbms.default_databaseneo4j #dbms.default_databaseneo4jwind serve…...

编程日记 2025/5/18 23:52:31

项目中用的网关Gateway及SpringCloud

在现代微服务架构中，网关（Gateway）起到了至关重要的作用。它不仅负责路由请求，还提供了统一的认证、授权、负载均衡、限流等功能。Spring Cloud Gateway 是 Spring Cloud 生态系统中的一个重要组件，专门为微服务架构提…...

编程日记 2025/5/14 12:37:03

《Ollama Python 库》

Ollama Python 库 Ollama Python 库提供了将 Python 3.8 项目与 Ollama 集成的最简单方法。先决条件应该安装并运行 Ollama拉取一个模型以与库一起使用：例如ollama pull <model>ollama pull llama3.2 有关可用模型的更多信息，请参阅 Ollama.com。…...

编程日记 2025/5/19 18:15:19

大模型概述（方便不懂技术的人入门）

1 大模型的价值 LLM模型对人类的作用，就是一个百科全书级的助手。有多么地百科全书，则用参数的量来描述， 一般地，大模型的参数越多，则该模型越好。例如，GPT-3有1750亿个参数，GPT-4可能有超过1万…...

编程日记 2025/5/19 18:23:27

Ubuntu16.04编译安装Cartographer 1.0版本

说明官方文档由于Ubuntu16.04已经是很老的系统，如果直接按照Cartographer官方安装文档安装会出现代码编译失败的问题，本文给出了解决这些问题的办法。正常情况下执行本文给出的安装方法即可成功安装。依赖安装 # 这里和官方一致 # Install the req…...

编程日记 2025/5/19 18:33:27

AI-ISP论文Learning to See in the Dark解读

论文地址：Learning to See in the Dark 图1. 利用卷积网络进行极微光成像。黑暗的室内环境。相机处的照度小于0.1勒克斯。索尼α7S II传感器曝光时间为1/30秒。(a) 相机在ISO 8000下拍摄的图像。(b) 相机在ISO 409600下拍摄的图像。该图像存在噪点和色彩偏差。©…...

编程日记 2025/5/16 1:55:56

2 MapReduce

2 MapReduce 1. MapReduce 介绍1.1 MapReduce 设计构思 2. MapReduce 编程规范3. Mapper以及Reducer抽象类介绍1.Mapper抽象类的基本介绍2.Reducer抽象类基本介绍 4. WordCount示例编写5. MapReduce程序运行模式6. MapReduce的运行机制详解6.1 MapTask 工作机制6.2 ReduceTask …...

编程日记 2025/5/19 18:08:30

OpenCV：SIFT关键点检测与描述子计算

目录 1. 什么是 SIFT？ 2. SIFT 的核心步骤 2.1 尺度空间构建 2.2 关键点检测与精细化 2.3 方向分配 2.4 计算特征描述子 3. OpenCV SIFT API 介绍 3.1 cv2.SIFT_create() 3.2 sift.detect() 3.3 sift.compute() 3.4 sift.detectAndCompute() 4. SIFT 关…...

编程日记 2025/5/14 22:56:38

初识Cargo：Rust的强大构建工具与包管理器

初识Cargo：Rust的强大构建工具与包管理器如果你刚刚开始学习Rust，一定会遇到一个名字：Cargo。Cargo是Rust的官方构建工具和包管理器，它让Rust项目的创建、编译、测试和依赖管理变得非常简单。本文将带你快速了解Cargo的基本用法…...

编程日记 2025/5/17 11:56:05

LightM-UNet（2024 CVPR）

论文标题LightM-UNet: Mamba Assists in Lightweight UNet for Medical Image Segmentation论文作者Weibin Liao, Yinghao Zhu, Xinyuan Wang, Chengwei Pan, Yasha Wang and Liantao Ma发表日期2024年01月01日GB引用> Weibin Liao, Yinghao Zhu, Xinyuan Wang, et al. Ligh…...

编程日记 2025/5/18 8:42:25

2025年02月01日Github流行趋势

项目名称：oumi 项目地址url：https://github.com/oumi-ai/oumi 项目语言：Python 历史star数：544 今日star数：103 项目维护者：xrdaukar, oelachqar, taenin, wizeng23, kaisopos 项目简介：一切你需…...

编程日记 2025/5/17 16:36:29

自动化测试框架搭建-封装requests-优化

目的 1、实际的使用场景，无法避免的需要区分GET、POST、PUT、PATCH、DELETE等不同的方式请求，以及不同请求的传参方式 2、python中requests中，session.request方法，GET请求，只支持params传递参数 session.request(me…...

编程日记 2025/5/16 6:57:58

什么是线性化PDF？

线性化PDF是一种特殊的PDF文件组织方式。总体而言，PDF是一种极为优雅且设计精良的格式。PDF由大量PDF对象构成，这些对象用于创建页面。相关信息存储在一棵二叉树中，该二叉树同时记录文件中每个对象的位置。因此，打开文件时只需加…...

编程日记 2025/5/12 12:44:25

XML DOM 浏览器差异

DOM 解析中的浏览器差异所有现代的浏览器都支持 W3C DOM 规范。然而，浏览器之间是有差异的。一个重要的差异是： 处理空白和换行的方式 DOM - 空白和换行 XML 经常在节点之间包含换行或空白字符。这是在使用简单的编辑器（比如记事本&…...

编程日记 2025/5/19 18:35:08

电子电气架构 --- 汽车电子拓扑架构的演进过程

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 简单，单纯，喜欢独处，独来独往，不易合同频过着接地气的生活…...

编程日记 2025/5/19 10:11:53

01-六自由度串联机械臂（ABB）位置分析

ABB工业机器人（IRB2600）如下图所示（d1444.8mm，a1150mm，a2700mm，a3115mm，d4795mm，d685mm），利用改进DH法建模，坐标系如下所示： 利用改进…...

编程日记 2025/5/19 0:08:52

04树 + 堆 + 优先队列 + 图（D1_树（D6_B树（B）））

目录一、学习前言二、基本介绍三、特性 1. 从概念上说起 2. 举个例子四、代码实现节点准备大体框架实现分裂实现新增实现删除五、完整源码一、学习前言前面我们已经讲解过了二叉树、二叉搜索树（BST）、平衡二叉搜索树&#xff08…...

编程日记 2025/5/18 22:23:05

350.两个数组的交集 ②

目录题目过程解法题目给你两个整数数组 nums1 和 nums2 ，请你以数组形式返回两数组的交集。返回结果中每个元素出现的次数，应与元素在两个数组中都出现的次数一致（如果出现次数不一致，则考虑取较小值）。可以不考虑…...

编程日记 2025/5/19 9:12:58

C#，入门教程(09)——运算符的基础知识

上一篇： C#，入门教程(08)——基本数据类型及使用的基础知识https://blog.csdn.net/beijinghorn/article/details/123906998 一、算术运算符号算术运算符号包括：四则运算加 , 减-, 乘*, 除/与取模%。 // 加法，运算 int va 1 …...

编程日记 2025/5/10 0:06:20

Python-基于PyQt5,wordcloud,pillow,numpy,os,sys等的智能词云生成器

前言：日常生活中，我们有时后就会遇见这样的情形：我们需要将给定的数据进行可视化处理，同时保证呈现比较良好的量化效果。这时候我们可能就会用到词云图。词云图（Word cloud）又称文字云，是一种文…...

编程日记 2025/5/18 15:04:14

海外问卷调查之渠道查，企业经营的指南针

海外问卷调查，是企业调研最常用到的方法，有目的、有计划、有系统地收集研究对象的现实状况或历史状况的一种有效手段，是指导企业经营的有效手段。海外问卷调查充分运用历史法、观察法等方法，同时使用谈话、问卷、个案研究、测试…...

编程日记 2025/5/16 14:42:38

C++：虚函数与多态性习题

题目内容： 构建一个车（vehicle）基类，包含Run、Stop两个纯虚函数。由此基类，派生出（Car）轿车类，（truck）卡车类，在这两个类中别分定义Run和Stop两个…...

编程日记 2025/5/15 12:27:18

单片机基础模块学习——超声波传感器

一、超声波原理左边发射超声波信号，右边接收超声波信号左边的芯片用来处理超声波发射信号，中间的芯片用来处理接收的超声波信号二、超声波原理图 T——transmit 发送R——Recieve 接收 U18芯片对输入的N_A1信号进行放大，然后输入给超声…...

编程日记 2025/5/12 14:15:32

通过protoc工具生成proto的pb.go文件以及使用protoc-go-inject-tag工具注入自定义标签

1.ProtoBuf认识,安装以及用法参考:[golang 微服务] 3. ProtoBuf认识，安装以及golang 中ProtoBuf使用 2. 使用protoc-go-inject-tag工具注入自定义标签这里有一个案例: syntaxproto3; package test;option go_package ".;test";message MyMessage {int6…...

编程日记 2025/5/17 21:28:17

42【语言的编码架构】

不同语言采用的编码架构不一样火山采用：UTF-16 易语言采用：GBK php采用：UTF-8 这个编码架构指的就是文本所代表的字节集，比如易语言中“你好”表示的就是{196,227,186,195} 窗口程序集名保留保留备注窗口程序集_启动窗口 …...

编程日记 2025/5/19 3:17:02

TOF技术原理和静噪对策

本文章是笔者整理的备忘笔记。希望在帮助自己温习避免遗忘的同时，也能帮助其他需要参考的朋友。如有谬误，欢迎大家进行指正。一、什么是TOF TOF 是Time of Flight的缩写，它是一种通过利用照射波和反射波之间的时间差来测量到物体的距离的测…...

编程日记 2025/5/17 5:37:21

ssh调试：fatal: Could not read from remote repository.

我遇到的原因和网上说的什么在生产密钥时没加邮箱，以及多个密钥的配置问题都不一样； 例如https://blog.csdn.net/baoyin0822/article/details/122584931 或https://blog.csdn.net/qq_55558061/article/details/124117445 我遇到的问题的原因跟他们都i不…...

编程日记 2025/5/14 15:53:19

win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件）

win10部署本地deepseek-r1，chatbox，deepseek联网（谷歌网页插件） 前言一、本地部署DeepSeek-r1step1 安装ollamastep2 下载deepseek-r1step2.1 找到模型deepseek-r1step2.2 cmd里粘贴后按回车，进行下载 step3 测试指令…...

编程日记 2025/5/18 11:06:51

SpringCloud系列教程：微服务的未来（十九）请求限流、线程隔离、Fallback、服务熔断

前言前言在现代微服务架构中，系统的高可用性和稳定性至关重要。为了解决系统在高并发请求或服务不可用时出现的性能瓶颈或故障，常常需要使用一些技术手段来保证服务的平稳运行。请求限流、线程隔离、Fallback 和服务熔断是微服务中常用的四种策略&…...

编程日记 2025/5/18 17:45:57

Hot100之子串

560和为K的子数组题目给你一个整数数组 nums 和一个整数 k ，请你统计并返回该数组中和为 k 的子数组的个数。子数组是数组中元素的连续非空序列思路解析 ps：我们的presum【0】就是0，如果没有这个0的话我们的第一个元素就无法减去上…...

编程日记 2025/5/19 12:55:32

SpringBoot笔记

1.创建使用idea提供的脚手架创建springboot项目，选上需要的模块，会自动进行导包打成jar包，之前直接用原生的maven打包的是一个瘦jar，不能直接跑，把服务器上部署的jar排除在外了，但是现在加上打包查件&am…...

编程日记 2025/5/13 17:09:55

一、TensorFlow的建模流程

1. 数据准备与预处理： 加载数据：使用内置数据集或自定义数据。预处理：归一化、调整维度、数据增强。划分数据集：训练集、验证集、测试集。转换为Dataset对象：利用tf.data优化数据流水线。 import tensorflow a…...

编程日记 2025/5/14 18:57:03

4 Hadoop 面试真题

4 Hadoop 面试真题 1. Apache Hadoop 3.0.02. HDFS 3.x 数据存储新特性-纠删码Hadoop面试真题 1. Apache Hadoop 3.0.0 Apache Hadoop 3.0.0在以前的主要发行版本（hadoop-2.x）上进行了许多重大改进。最低要求的Java版本从Java 7增加到Java 8 现在&…...

编程日记 2025/5/19 7:57:19

信息学奥赛一本通 ybt 1608：【例 3】任务安排 3 | 洛谷 P5785 [SDOI2012] 任务安排

【题目链接】 ybt 1608：【例 3】任务安排 3 洛谷 P5785 [SDOI2012] 任务安排【题目考点】 1. 动态规划：斜率优化动规 2. 单调队列 3. 二分答案【解题思路】与本题题面相同但问题规模不同的题目： 信息学奥赛一本通 1607&#xff1a…...

编程日记 2025/5/19 14:43:31

实验六项目二简易信号发生器的设计与实现（HEU）

声明：代码部分使用了AI工具实验六综合考核 Quartus 18.0 FPGA 5CSXFC6D6F31C6N 1. 实验项目要求利用硬件描述语言Verilog（或VHDL）、图形描述方式、IP核，结合数字系统设计方法，在Quartus开发环境下&#xff…...

编程日记 2025/5/17 14:31:34

基于最近邻数据进行分类

人工智能例子汇总：AI常见的算法和例子-CSDN博客完整代码： import torch import numpy as np from sklearn.neighbors import KNeighborsClassifier from sklearn.metrics import accuracy_score import matplotlib.pyplot as plt# 生成一个简单的数据…...

编程日记 2025/5/16 21:23:03

SpringSecurity：There is no PasswordEncoder mapped for the id “null“

文章目录一、情景说明二、分析三、解决一、情景说明在整合SpringSecurity功能的时候我先是去实现认证功能也就是，去数据库比对用户名和密码相关的类： UserDetailsServiceImpl implements UserDetailsService 用于SpringSecurity查询数据库 Logi…...

编程日记 2025/5/18 20:52:22

redex快速体验

第一步： 2.回调函数在每次state发生变化时候自动执行...

编程日记 2025/5/12 13:43:05

Flask框架基础入门教程_ezflaskapp

pip install flaskFlask 快速入门小应用学东西，得先知道我们用这个东西，能做出来一个什么东西。一个最小的基于flask 的应用可能看上去像下面这个样子： from flask import Flask app Flask(__name__)app.route(/) def hello_world():ret…...

编程日记 2025/5/15 15:54:57

Anaconda 全面解析：从入门到精通的操作教程

大家好，我是滔滔，欢迎来到我的空间。先简单介绍下anconda 一、环境管理轻松创建独立的 Python 环境：可以为不同的项目创建不同的环境，每个环境可以有不同的 Python 版本和安装不同的包，避免了包冲突问题。例如&…...

编程日记 2025/5/19 8:26:21

3D图形学与可视化大屏：什么是材质属性，有什么作用？

一、颜色属性漫反射颜色漫反射颜色决定了物体表面对入射光进行漫反射后的颜色。当光线照射到物体表面时，一部分光被均匀地向各个方向散射，形成漫反射。漫反射颜色的选择会直接影响物体在光照下的外观。例如，一个红色的漫反射颜色会使物体在…...

编程日记 2025/5/16 4:38:37

HTML-新浪新闻-实现标题-排版

标题排版图片标签：<img> src：指定图片的url（绝对路径/相对路径） width：图片的宽度（像素/相对于父元素的百分比） heigth：图片的高度（像素/相对于父元素的百分比&a…...

编程日记 2025/5/19 4:19:31

.Net / C# 分析文件编码并将各种编码格式转为另一个编码格式 ( 比如: GB2312→UTF-8, UTF-8→GB2312)

相关库 .Net 8 编码识别: github.com/CharsetDetector/UTF-unknown <PackageReference Include"UTF.Unknown" Version"2.5.1" />代码 using UtfUnknown;var dir_path "D:\\Desktop\\新建文件夹2\\新建文件夹"; var dir_new_path &quo…...

编程日记 2025/5/15 22:53:03

本地部署 DeepSeek-R1 大模型

本地部署 DeepSeek-R1 大模型指南 1. 引言 1.1 DeepSeek-R1 模型简介在人工智能的世界里，大型语言模型（LLM）正如一座巨大的宝库，里面储存着丰富的信息和无限的潜力。而DeepSeek-R1，就像那扇打开智慧之门的钥匙。它…...

编程日记 2025/5/18 3:19:14

canvas的基本用法

canvas canvas元素简介 1.是个container元素<canvas width100 height100></canvas>，有开闭标签 2.有且只有width和height两个attribute，不需要写单位 canvas的基本使用 const canvasEl document.getElementById(canvas01) const ctx …...

编程日记 2025/5/15 0:58:44

步骤