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

vue实现动态图片(gif)

目录

1. 背景

2. 分析

3. 代码实现


1. 背景

最近在项目中发现一个有意思的小需求,鼠标移入一个盒子里,然后盒子里的图就开始动起来,就像一个gif一样,然后鼠标移出,再按照原来的变化变回去,就像变形金刚一样,首先鼠标移入从车变成机器人,鼠标移出然后从机器人变回车。

2. 分析

实现这样一个需求的前提是,UI需要给你提供这样一张图,这个图是由多个连续的画面一起构成的一张图,如下这张我在网上随便找的图。其实这是一张图,只不过这张图由很多连贯的图一起组成的,当我们将各个独立的画面移动到可视窗口时,那么看起来就像是一个动态图一样。

然后我们来分析如何实现,首先我们要有一个div,然后设置这个div的background为这张图片,假设这个div宽150px,这张图宽1500px,那么浏览器呢就会默认显示这张图的前150px,也就是将这张图的最左端显示在div上。那么我们的可视窗口就是这150px,看到的就是这张图里的第一个小图。然后我们通过js的循环计时器setInterval来动态改变这个图的backgroundPositionX,如果UI提供的图是竖直的,那么就动态改变backGroundPositionY。

3. 代码实现

HTML&&CSS

<template><div class="container"><divclass="imgContainer"@mouseenter="handleMouseEnter"@mouseleave="handleMouseLeave"><div class="img" ref="imgRef"></div></div></div>
</template><style scoped>
.container {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;
}
.imgContainer {width: 150px;height: 300px;
}
.img {width: 100%;height: 100%;background: red;background: url("@/assets/lotsImg.png");background-position: 0 0;
}
</style>

js部分:

在mouseEnter函数中,我们先设置循环定时器,然后在interValFun里设置具体逻辑,这里的"if(num< 12)"要根据UI提供的图片自己来设定,因为我找的这个图一共有12个小图所以是12,然后具体的"-${num * 136}px"这里具体要乘以多少也要根据图片的渲染大小来计算。如下图, 1636 / 12 约等于 136,所以我设置的136px。

在mouseLeave函数中,首先先清楚之前的定时器,然后获取当前图片的backGroundPositionX值,然后如果这个值小于等于0,就一直重复的更新backGroundPositionX值,如果大于了0,说明这个图的位置已经来到了最左端了,就可以不用再计算了,就清除这个定时器。

import { ref } from "vue";const imgRef = ref(null);
const interval = ref(null);function handleMouseEnter() {interval.value = setInterval(interValFun, 80);let num = 0;function interValFun() {num++;if (num < 12) {imgRef.value.style.backgroundPositionX = `-${num * 136}px`;}}
}function handleMouseLeave() {clearInterval(interval.value);let currentPosition = parseFloat(imgRef.value.style.backgroundPositionX);const interValConst = setInterval(interValFun, 80);function interValFun() {if (currentPosition <= 0) {imgRef.value.style.backgroundPositionX = `${currentPosition}px`;} else {clearInterval(interValConst);return;}currentPosition = currentPosition + 136;}
}

最后实现的效果如图:

动态图例子

相关文章:

vue实现动态图片(gif)

目录 1. 背景 2. 分析 3. 代码实现 1. 背景 最近在项目中发现一个有意思的小需求&#xff0c;鼠标移入一个盒子里&#xff0c;然后盒子里的图就开始动起来&#xff0c;就像一个gif一样&#xff0c;然后鼠标移出&#xff0c;再按照原来的变化变回去&#xff0c;就像变形金刚…...

win11系统设置允许无密码远程桌面连接

在windows11系统中设置允许无密码远程桌面连接&#xff0c;可以通过以下步骤进行操作&#xff1a; 1、启用远程桌面功能&#xff1a;‌首先&#xff0c;‌确保您的Windows 11是专业版&#xff0c;‌因为家庭版默认不支持远程桌面功能。‌您可以通过“设置” -> “系统” -&…...

使用 PyAMF / Django 实现 Flex 类映射

1、问题背景 PyAMF 是一个用于在 Flex 和 Python 之间进行通信的库&#xff0c;在使用 PyAMF 与 Flex 应用进行通信时&#xff0c;经常会遇到错误。例如&#xff0c;在发送一个 Flex Investor 对象到 Python 时&#xff0c;会得到一个 ‘KeyError: first_name’ 的错误。这是因…...

算法思想总结:字符串

一、最长公共前缀 . - 力扣&#xff08;LeetCode&#xff09; 思路1&#xff1a;两两比较 时间复杂度mn 实现findcomon返回两两比较后的公共前缀 class Solution { public:string longestCommonPrefix(vector<string>& strs) {//两两比较 string retstrs[0];size…...

滑块拼图验证码识别

通常滑块验证码都是横向滑动&#xff0c;今天看到一个比较特别的滑块拼图验证码&#xff0c;他不仅能在横向上滑动&#xff0c;还需要进行纵向滑动。如下图所示&#xff1a; 他的滑块在背景图片的左上角&#xff0c;需要鼠标拖动左上角的滑块&#xff0c;移动到背景图的缺口位置…...

Activity启动流程

1 冷启动与热启动 应用启动分为冷启动和热启动。 冷启动&#xff1a;点击桌面图标&#xff0c;手机系统不存在该应用进程&#xff0c;这时系统会重新fork一个子进程来加载Application并启动Activity&#xff0c;这个启动方式就是冷启动。 热启动&#xff1a;应用的热启动比冷…...

PHP转Go系列 | ThinkPHP与Gin框架之OpenApi授权设计实践

大家好&#xff0c;我是码农先森。 我之前待过一个做 ToB 业务的公司&#xff0c;主要是研发以会员为中心的 SaaS 平台&#xff0c;其中涉及的子系统有会员系统、积分系统、营销系统等。在这个 SaaS 平台中有一个重要的角色「租户」&#xff0c;这个租户可以拥有一个或多个子系…...

使用SOAP与TrinityCore交互(待定)

原文&#xff1a;SOAP with TrinityCore | TrinityCore MMo Project Wiki 如何使用SOAP与TC交互 SOAP代表简单对象访问协议&#xff0c;是一种类似于REST的基于标准的web服务访问协议的旧形式。只要必要的配置到位&#xff0c;您就可以利用SOAP向TrinityCore服务器发送命令。 …...

QQ频道导航退出

若该文为原创文章&#xff0c;转载请注明原文出处 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/140413538 长沙红胖子Qt&#xff08;长沙创微智科&#xff09;博文大全&#xff1a;开发技术集合&#xff08;包含Qt实用技术、树莓派、三维、OpenCV…...

MySQL里的累计求和

在MySQL中&#xff0c;你可以使用SUM()函数来进行累计求和。如果你想要对一个列进行累计求和&#xff0c;可以使用OVER()子句与ORDER BY子句结合&#xff0c;进行窗口函数的操作。 以下是一个简单的例子&#xff0c;假设我们有一个名为sales的表&#xff0c;它有两个列&#x…...

Python爬虫速成之路(3):下载图片

hello hello~ &#xff0c;这里是绝命Coding——老白~&#x1f496;&#x1f496; &#xff0c;欢迎大家点赞&#x1f973;&#x1f973;关注&#x1f4a5;&#x1f4a5;收藏&#x1f339;&#x1f339;&#x1f339; &#x1f4a5;个人主页&#xff1a;绝命Coding-CSDN博客 &a…...

同三维T80004EA编解码器视频使用操作说明书:高清HDMI编解码器,高清SDI编解码器,4K超清HDMI编解码器,双路4K超高清编解码器

同三维T80004EA编解码器视频使用操作说明书&#xff1a;高清HDMI编解码器&#xff0c;高清SDI编解码器&#xff0c;4K超清HDMI编解码器&#xff0c;双路4K超高清编解码器 同三维T80004EA编解码器视频使用操作说明书&#xff1a;高清HDMI编解码器&#xff0c;高清SDI编解码器&am…...

ChatGPT提问获取高质量答案的艺术PDF下载书籍推荐分享

ChatGPT高质量prompt技巧分享pdf&#xff0c; ChatGPT提问获取高质量答案的艺术pdf。本书是一本全面的指南&#xff0c;介绍了各种 Prompt 技术的理解和利用&#xff0c;用于从 ChatGPTmiki sharing中生成高质量的答案。我们将探讨如何使用不同的 Prompt 工程技术来实现不同的目…...

微信小程序中的数据通信

方法1: 使用回调函数 在app.js中:可以在修改globalData后执行一个回调函数,这个回调函数可以是页面传递给app的一个更新函数。// app.js App({globalData: {someData: ,},setSomeData(newData, callback) {this.globalData.someData = newData;if (typeof callback === funct…...

everything搜索不到任何文件-设置

版本&#xff1a; V1.4.1.1024 (x64) 问题&#xff1a;搜索不到任何文件 click:[工具]->[选项]->下图所示 将本地磁盘都选中包含...

python如何结束程序运行

方法1&#xff1a;采用sys.exit(0)&#xff0c;正常终止程序&#xff0c;从图中可以看到&#xff0c;程序终止后shell运行不受影响。 方法2&#xff1a;采用os._exit(0)关闭整个shell&#xff0c;从图中看到&#xff0c;调用sys._exit(0)后整个shell都重启了&#xff08;RESTAR…...

InnoDB

InnoDB 是 MySQL 默认的存储引擎&#xff0c;它提供了事务支持、行级锁定和外键约束等高级功能。下面详细解析 InnoDB 的一些底层原理和关键特性。 1. 数据存储结构 表空间&#xff08;Tablespace&#xff09; InnoDB 使用表空间来管理数据存储&#xff0c;表空间可以是共享…...

spark运行报错:Container killed by YARN for exceeding memory limits

用spark跑数据量大的离线调度任务报错&#xff1a;Reason: Container killed by YARN for exceeding memory limits. 19.0 GB of 19 GB physical memory used. Consider boosting spark.yarn.executor.memoryOverhead or disabling yarn.nodemanager.vmem-check-enabled becaus…...

(三)大模型/人工智能/机器学习/深度学习/NLP

一.模型 模型&#xff0c;简单来说&#xff0c;就是用来表示或解释某个事物、现象或系统的一种工具或框架。它可以是实体的&#xff0c;也可以是虚拟的&#xff0c;目的是为了帮助我们更好地理解和预测所描述的对象。在生活中&#xff0c;模型无处不在&#xff0c;它们以各种形…...

数学基础 -- 三角学

三角学 三角学&#xff08;Trigonometry&#xff09;是数学的一个分支&#xff0c;主要研究三角形的边长与角度之间的关系。三角学在几何学、物理学、工程学等多个领域中有广泛的应用。以下是三角学的一些基本概念和公式&#xff1a; 基本概念 直角三角形&#xff1a;一个角…...

【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型

摘要 拍照搜题系统采用“三层管道&#xff08;多模态 OCR → 语义检索 → 答案渲染&#xff09;、两级检索&#xff08;倒排 BM25 向量 HNSW&#xff09;并以大语言模型兜底”的整体框架&#xff1a; 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后&#xff0c;分别用…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

【OSG学习笔记】Day 18: 碰撞检测与物理交互

物理引擎&#xff08;Physics Engine&#xff09; 物理引擎 是一种通过计算机模拟物理规律&#xff08;如力学、碰撞、重力、流体动力学等&#xff09;的软件工具或库。 它的核心目标是在虚拟环境中逼真地模拟物体的运动和交互&#xff0c;广泛应用于 游戏开发、动画制作、虚…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...