CSS+JS 堆叠图片动态交互切换

结合DeepSeek提供的代码,终于实现了堆叠两张图片动态循环切换,以下是代码:
通过绝对定位放了两张图片

<div class="col-lg-5" style="z-index: 40; position: relative;"><img src="images/banner_1.png" class="shadow_fa img1"style="width: 480px; height:480px; position: absolute; top: 15%; left:16%; z-index: 10;"><img src="images/banner_2.png" class="shadow_fa img2"style="width: 480px; height:480px; position: absolute; top: 7%; left:24%; z-index: 9;">
</div>

在这里插入图片描述
然后是CSS代码部分

<style type="text/css">.shadow_fa {/* 所有变化属性均触发动画 */transition: all 1s ease-in-out;}
</style>

然后是js代码

<script>// 获取两张图片const img1 = document.querySelector('.img1');const img2 = document.querySelector('.img2');function swapImages() {// 临时存储图片1的样式const tempTop = img1.style.top;const tempLeft = img1.style.left;const tempZIndex = img1.style.zIndex;const tempOpacity = img1.style.opacity;// 将图片1的样式设置为图片2的当前值img1.style.top = img2.style.top;img1.style.left = img2.style.left;img1.style.zIndex = img2.style.zIndex;img1.style.opacity = img2.style.opacity;// 将图片2的样式设置为图片1的原始值img2.style.top = tempTop;img2.style.left = tempLeft;img2.style.zIndex = tempZIndex;img2.style.opacity = tempOpacity;// 强制触发浏览器重绘(关键代码)void img1.offsetWidth;}// 每5秒执行一次setInterval(swapImages, 5000);
</script>

QQ2025325-113356

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/41473.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCould微服务架构之Docker(2)

Docker和虚拟机的差别&#xff1a; 虚拟机是在操作系统中模拟硬件设备&#xff0c;然后运行另外一个操作系统。

好用的Markdown阅读编辑器Typora破解记录

Typora破解 一、下载Typora二、安装Typora三、破解Typora &#x1f600; 记录一下Typora破解记录&#xff0c;怕不常用忘记咯&#xff0c;感觉自己现在的脑子就像我的肠子一样&#xff0c;刚装进去就么得了。。。&#x1f614; Typroa算是用起来很舒服的Markdown阅读器了吧&am…

UI前端与数字孪生:打造智慧城市的双引擎

hello宝子们...我们是艾斯视觉擅长ui设计和前端数字孪生、大数据、三维建模、三维动画10年经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 随着信息技术的飞速发展&#xff0c;智慧城市的概念逐渐从理论走向实践。智慧城市旨在通过运用物联网…

“征服HTML引号恶魔:“完全解析手册”!!!(quot;表示双引号)

&#x1f6a8;&#x1f4e2; "征服HTML引号恶魔&#xff1a;“完全解析手册” &#x1f4e2;&#x1f6a8; &#x1f3af; 博客引言&#xff1a;当引号变成"恶魔" &#x1f631; 是否遇到过这种情况&#xff1a; 写HTML时满心欢喜输入<div title"他…

k8s高可用集群安装

一、安装负载均衡器 k8s负载均衡器 官方指南 1、准备三台机器 节点名称IPmaster-1192.168.1.11master-2192.168.1.12master-3192.168.1.13 2、在这三台机器分别安装haproxy和keepalived作为负载均衡器 # 安装haproxy sudo dnf install haproxy -y# 安装Keepalived sudo yum …

node.js笔记

1. Node.js基本概念 1.1 什么是Node.js Node.js是一个开源、跨平台的JavaScript运行环境&#xff0c;广泛应用于各类项目。它基于Google Chrome的V8 JavaScript引擎&#xff0c;性能卓越。 Node.js在单个进程中运行&#xff0c;利用异步I/O操作避免阻塞&#xff0c;能高效处…

关于在vscode中的Linux 0.11 应用程序项目的生成和运行

首先我们需要需要查看镜像文件 查看软盘镜像文件 floppyb.img 中的内容 在 VSCode 的“Terminal”菜单中选择“Run Build Task...”&#xff0c;会在 VSCode 的顶部中间位置弹出一个 可以执行的 Task 列表&#xff0c;选择其中的“打开 floppyb.img”后会使用 Floppy Editor …

【JavaScript 简明入门教程】为了Screeps服务的纯JS入门教程

0 前言 0-1 Screeps: World 众所不周知&#xff0c;​Screeps: World是一款面向编程爱好者的开源大型多人在线即时战略&#xff08;MMORTS&#xff09;沙盒游戏&#xff0c;其核心机制是通过编写JavaScript代码来控制游戏中的单位&#xff08;称为“Creep”&#xff09;&#…

【CSS文字渐变动画】

CSS文字渐变动画 HTML代码CSS代码效果图 HTML代码 <div class"title"><h1>今天是春分</h1><p>正是春天到来的日子&#xff0c;花都开了&#xff0c;小鸟也飞回来了&#xff0c;大山也绿了起来&#xff0c;空气也有点嫩嫩的气息了</p>…

【论文阅读】基于思维链提示的大语言模型软件漏洞发现与修复方法研究

这篇文章来自于 Chain-of-Thought Prompting of Large Language Models for Discovering and Fixing Software Vulnerabilities 摘要 软件安全漏洞在现代系统中呈现泛在化趋势&#xff0c;其引发的社会影响日益显著。尽管已有多种防御技术被提出&#xff0c;基于深度学习&…

SpringMVC_day02

一、SSM 整合 核心步骤 依赖管理 包含 SpringMVC、Spring JDBC、MyBatis、Druid 数据源、Jackson 等依赖。注意点&#xff1a;确保版本兼容性&#xff08;如 Spring 5.x 与 MyBatis 3.5.x&#xff09;。 配置类 SpringConfig&#xff1a;扫描 Service 层、启用事务管理、导入…

基于ADMM无穷范数检测算法的MIMO通信系统信号检测MATLAB仿真,对比ML,MMSE,ZF以及LAMA

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 ADMM算法 4.2 最大似然ML检测算法 4.3 最小均方误差&#xff08;MMSE&#xff09;检测算法 4.4 迫零&#xff08;ZF&#xff09;检测算法 4.5 OCD_MMSE 检测算法 4.6 LAMA检测算法 …

CSS动画

目录 一、核心概念与语法 1. keyframes 关键帧 2. animation 属性 二、动画调速函数&#xff08;animation-timing-function&#xff09; 1. 预设值 2. 贝塞尔曲线 3. 步进函数&#xff08;steps()&#xff09; 三、动画控制与交互 1. 暂停与恢复 2. JavaScript 控制…

架构思维:预约抢茅子架构设计

文章目录 案例&#xff1a;预约抢茅子复杂度分析商品预约阶段等待抢购阶段商品抢购阶段订单支付阶段 技术方案商品预约阶段一、基于 Redis 单节点的分布式锁方案1. 核心流程2. 关键设计点 二、Redis 单节点方案的局限性1. 单点故障风险2. 主从切换问题 三、多节点 Redis 实现高…

PHP大马的使用

BestShell/best_php_shell.php at master Kevil-hui/BestShell 这里用到的是这位师傅的大马&#xff08;主要是从头开始写一个大马实在太麻烦了&#xff09; 用pikachu靶场进行上传的测试 在这里传马&#xff0c;这个是简单的前端校验&#xff0c;bp抓包改后缀就好了 上传成…

HCI 清除 SCP纳管残留信息

项目场景&#xff1a; 一台测试HCI主机&#xff0c;之前有连接了SCP&#xff0c;由于环境变更&#xff0c;无法与SCP连通&#xff0c;HCI残留了SCP纳管信息 问题描述 集群管理中没有脱离SCP的选项 点击vmware 虚拟机 显示被接管 云安全中心也显示被接管 原因分析&#xff1a; …

【算法day22】两数相除——给你两个整数,被除数 dividend 和除数 divisor。将两数相除,要求 不使用 乘法、除法和取余运算。

29. 两数相除 给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。例如&#xff0c;8.345 将被截断为 8 &#x…

顺序表(C语言源码详解,附加测试代码)

目录 顺序表的基本实现 顺序表结构 顺序表的初始化 检查顺序表容量空间 顺序表的头插 顺序表的打印 顺序表的头删 顺序表的尾插 顺序表的尾删 顺序表的查找 ​编辑指定位置之前插入数据 指定位置删除数据 顺序表的销毁 顺序表的基本实现 顺序表结构 对顺序表的数…