使用CSS、JavaScript、jQuery三种方式实现手风琴效果
手风琴效果有不少，王者荣耀官网（源网址 https://pvp.qq.com/raiders/ ）有一处周免英雄，使用的就是手风琴效果，如图所示。
我试着用css、js、jQuery三种方式实现了这种效果，最终效果差不多，美中不足的是，css方式当鼠标离开后，会恢复到初始状态，也就是显示第一张大图片的状态。而使用js和jQuery方式，则会停留在鼠标进入的那一张，不恢复到第一张的状态。
如何使用纯CSS，保留住:hover的状态，我还没有找到解决方法，若有哪位大神知晓，欢迎告知，多谢！。
一、CSS方式
显示、隐藏以及过渡效果是通过不透明度opacity实现的，关键是鼠标停留在列表上各项的状态，鼠标停留在某个列表项上，这个列表项的状态。用到的图片是之前从官网下载的。
代码如下：
<!doctype html>
<html><head><meta charset="utf-8"><title>王者荣耀-手风琴案例</title><!-- 原网址为 https://pvp.qq.com/raiders/ --><style type="text/css">* {margin: 0;padding: 0;}ul ,li{list-style: none;}.king {width: 708px;background: url(images/bg.png) no-repeat;padding: 10px;overflow: hidden;margin: 100px auto;font-size: 0;}.king ul li {position: relative;display: inline-block;width: 69px;height: 69px;padding-right: 10px;transition: all 0.3s; /*过渡效果*/overflow: hidden;}.big {opacity: 0; /*完全透明*/}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}/* 初始状态第一项展示，宽224px，.big显示，.small隐藏 */.king li:first-child {width: 224px;}/* 使用opacity进行显示隐藏，有过渡效果，visibility没有渐变效果 */.king li:first-child .big {opacity: 1;/* visibility: visible; */}/* .small隐藏*/.king li:first-child .small {opacity: 0;}/* 鼠标移到列表ul上时，.big隐藏，.small显示 */.king ul:hover li {width: 69px;}.king ul:hover li .big {opacity: 0;}.king ul:hover li .small {opacity: 1;}/* 鼠标移动到列表项li上时,当前项宽度变成224px，.big显示，.small隐藏 */.king ul li:hover {width: 224px;}.king ul li:hover .big {opacity: 1;}.king ul li:hover .small {opacity: 0;}</style></head><body><div class="king"><ul><li><a href="#"><img src="images/zhaojun1.jpg" alt="" class="small"><img src="images/zhaojun.png" alt="" class="big"></a></li><li><a href="#"><img src="images/fuzi1.jpg" alt="" class="small"><img src="images/fuzi.png" alt="" class="big"></a></li><li><a href="#"><img src="images/cheng1.jpg" alt="" class="small"><img src="images/cheng.png" alt="" class="big"></a></li><li><a href="#"><img src="images/lanling1.jpg" alt="" class="small"><img src="images/lanling.png" alt="" class="big"></a></li><li><a href="#"><img src="images/zhang1.jpg" alt="" class="small"><img src="images/zhang.png" alt="" class="big"></a></li><li><a href="#"><img src="images/lianpo1.jpg" alt="" class="small"><img src="images/lianpo.png" alt="" class="big"></a></li><li><a href="#"><img src="images/libai1.jpg" alt="" class="small"><img src="images/libai.png" alt="" class="big"></a></li></ul></div></body>
</html>二、JavaScript方式
代码不麻烦，主要还是排他思想，先把所有的变成普通样式，再把移入的变成当前样式。使用的是mouseenter事件，使用mouseover事件的话，在这个例子中没看出有什么区别。
代码如下：
<!doctype html>
<html><head><meta charset="utf-8"><title>手风琴案例</title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}img {display: block;}.king {width: 708px;background: url(images/bg.png) no-repeat;padding: 10px;overflow: hidden;margin: 100px auto;}.king ul {overflow: hidden;font-size: 0;}.king li {position: relative;display: inline-block;width: 69px;height: 69px;margin-right: 10px;overflow: hidden;transition: all .3s;}
/* 当前项：宽度224，大图片显示，小图片隐藏 */.king li.current {width: 224px;}.king li.current .big {opacity: 1;}.king li.current .small {opacity: 0;}.big {width: 224px;opacity: 0;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;transition: all .3s;opacity: 1;}</style></head><body><div class="king"><ul><li class="current"><a href="#"><img src="images/zhaojun1.jpg" alt="" class="small"><img src="images/zhaojun.png" alt="" class="big"></a></li><li><a href="#"><img src="images/fuzi1.jpg" alt="" class="small"><img src="images/fuzi.png" alt="" class="big"></a></li><li><a href="#"><img src="images/cheng1.jpg" alt="" class="small"><img src="images/cheng.png" alt="" class="big"></a></li><li><a href="#"><img src="images/lanling1.jpg" alt="" class="small"><img src="images/lanling.png" alt="" class="big"></a></li><li><a href="#"><img src="images/zhang1.jpg" alt="" class="small"><img src="images/zhang.png" alt="" class="big"></a></li><li><a href="#"><img src="images/lianpo1.jpg" alt="" class="small"><img src="images/lianpo.png" alt="" class="big"></a></li><li><a href="#"><img src="images/libai1.jpg" alt="" class="small"><img src="images/libai.png" alt="" class="big"></a></li></ul></div><!-- 排他思想 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出--><script>window.addEventListener('load', function() {var lis = document.querySelectorAll('.king li');for (let i = 0; i < lis.length; i++) {lis[i].addEventListener('mouseenter', function() {for (let k = 0; k < lis.length; k++) {lis[k].children[0].children[0].style.opacity = 1;lis[k].children[0].children[1].style.opacity = 0;lis[k].style.width = '69px';}this.style.width = '224px';this.children[0].children[0].style.opacity = 0;this.children[0].children[1].style.opacity = 1;})}})</script></body>
</html>三、jQuery方式
jQuery采用的链式写法，用到的方法挺多。我去官网看了看，最新版本是3.7.1。使用jQuery可以让代码简洁一些，不过在这个例子中不是很明显。
<!doctype html>
<html><head><meta charset="utf-8"><title>手风琴案例</title><style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}img {display: block;}.king {width: 750px;background: url(images/bg.png) no-repeat;padding: 10px;overflow: hidden;margin: 100px auto;}.king ul {overflow: hidden;font-size: 0;}.king li {position: relative;display: inline-block;width: 69px;height: 69px;margin-right: 10px;transition: all .3s;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}</style><script src="js/jquery-3.7.0.min.js"></script></head><body><div class="king"><ul><li class="current"><a href="#"><img src="images/zhaojun1.jpg" alt="" class="small"><img src="images/zhaojun.png" alt="" class="big"></a></li><li><a href="#"><img src="images/fuzi1.jpg" alt="" class="small"><img src="images/fuzi.png" alt="" class="big"></a></li><li><a href="#"><img src="images/cheng1.jpg" alt="" class="small"><img src="images/cheng.png" alt="" class="big"></a></li><li><a href="#"><img src="images/lanling1.jpg" alt="" class="small"><img src="images/lanling.png" alt="" class="big"></a></li><li><a href="#"><img src="images/zhang1.jpg" alt="" class="small"><img src="images/zhang.png" alt="" class="big"></a></li><li><a href="#"><img src="images/lianpo1.jpg" alt="" class="small"><img src="images/lianpo.png" alt="" class="big"></a></li><li><a href="#"><img src="images/libai1.jpg" alt="" class="small"><img src="images/libai.png" alt="" class="big"></a></li></ul></div><!-- 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出--><script type="text/javascript">$(function() {$(".king li").mouseenter(function() {$(this).css({width: 224}).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();$(this).siblings("li").css({width: 69}).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();})});</script></body></html>相关文章：
使用CSS、JavaScript、jQuery三种方式实现手风琴效果
手风琴效果有不少，王者荣耀官网（源网址 https://pvp.qq.com/raiders/ ）有一处周免英雄，使用的就是手风琴效果，如图所示。 我试着用css、js、jQuery三种方式实现了这种效果，最终效果差不多，美中不…...
什么是无头浏览器以及其工作原理?
如果您对这个概念还不熟悉，那么使用无头网络浏览器的想法可能会让您感到不知所措。无头浏览器本质上与您熟悉的网络浏览器相同，但有一个关键区别：它们没有图形用户界面 (GUI)。这意味着没有按钮、选项卡、地址栏或视觉显示。 相反，…...
计算机网络 —— 应用层（DNS域名系统）
计算机网络 —— 应用层（DNS域名系统） 什么是DNS域名的层次结构域名分类 域名服务器的分类域名解析方式递归查询（Recursive Query）迭代查询（Iterative Query）域名的高速缓存 我们今天来看DNS域名系统 什么…...
Linux--MQTT简介
一、简介 MQTT （ Message Queuing Telemetry Transport，消息队列遥测传输）， 是一种基于客户端服务端架构的发布/订阅模式的消息传输协议。 与 HTTP 协议一样， MQTT 协议也是应用层协议，工作在 TCP/IP 四…...
VMware Workerstation开启虚拟机后，产生乱码名称日志文件
问题情况 如下图所示，我的虚拟机版本是16.1.2版本，每次在启动虚拟机之后，D盘目录下都会产生一个如图下所示的乱码名称文件。同时，虚拟机文件目录也是杂乱不堪，没有按照一台虚拟机对应一个文件夹的形式存在。 问题处理…...
Unity射击游戏开发教程：（27）创建带有百分比的状态栏
创建带有弹药数和推进器百分比的状态栏 在本文中，我将介绍如何创建带有分数和百分比文本的常规状态栏。 由于 Ammo Bar 将成为 UI 的一部分，因此我们需要向 Canvas 添加一个空的 GameObject 并将其重命名为 AmmoBar。我们需要一个文本和两个图像对象，它们是 AmmoBar 的父级。…...
Linux内存从0到1学习笔记(8.16 SMMU详解）---更新中
写在前面 前面博客已经了解过。SMMU是IOMMU在ARM架构上的实现。主要为了解决虚拟化环境中，GuestOS无法直接将连续的物理地址分配给硬件的问题。对于Hypervisor/GuestOS的虚拟化系统来说，所有的VM都运行在Hypervisor上，每一个VM独立运行一个O…...
标准盒模型和怪异盒模型的区别
CSS盒模型： 内容区（content）内边距（padding）边框（border）外边距（margin） 分为标准盒模型和IE盒模型/怪异盒模型 为了正确设置元素在所有浏览器中的宽度和高度…...
【第8章】如何利用ControlNet生成“可控画面”？（配置要求/一键安装/快速上手/生成第一张图）ComfyUI基础入门教程
这节我们来讲AI绘画领域中一个很重要的概念：ControlNet，看下如何让生成的画面更可控。 🎅什么是ControlNet？ Stable Diffusion中的ControlNet是一种神经网络结构，它允许将额外的条件输入添加到预训练的图像扩散模型中，通过这种方式，ControlNet可以控制图像生成过程，…...
[qt] qt程序打包以及docker镜像打包
目录 一 环境准备: 1.1 qt环境 1.2 linuxdeplouqt打包工具 二 qt包发布: 2.1 搜索链接库 2.2 应用程序APP打包 2.3 发布 三 docker镜像包发布 3.1 环境准备 3.2 镜像生产脚本 3.3 加载镜像并运行docker容器 四 补充 4.1 时间不同步问题解决 一 环境准备: qt环境l…...
电脑屏幕监控软件有哪些？2025年监控软件排行榜
电脑屏幕监控软件有哪些？2025年监控软件排行榜 虽然现在还是2024年，但是有一些被广泛讨论和推荐的电脑屏幕监控软件，它们将在2025年异军突起，成为行业的引领者。 1.安企神软件： 功能全面的电脑屏幕监控软件…...
音视频主要概念
文章目录 常用的一些概念主要概念1主要概念2I帧P帧B帧 常用视频压缩算法 小结 常用的一些概念 主要概念1 视频码率：kb/s，是指视频文件在单位时间内使用的数据流量，也叫码流率。码率越大，说明单位时间内取样率越大，数…...
AIGC全面介绍
AIGC（Artificial Intelligence and General Competitions）是一个专注于人工智能和综合能力竞赛的组织。AIGC的目标是促进人工智能和综合能力的发展，并为相关领域的学术研究和应用创新提供支持和平台。 AIGC主要致力于人工智能竞赛的组织、举…...
vscode中模糊搜索和替换
文章目录 调出搜索（快捷键）使用正则（快捷键）替换（快捷键）案例假设给定文本如下目标1：查找所有函数名目标2：替换所有函数名为hello目标3：给url增加查询字符串参数 调出搜索…...
人工智能入门学习教程分享
目录 1.首先安装python，官网地址：Download Python | Python.org，进入网址，点击Windows链接 2.下载完成之后，进行傻瓜式安装，如果不选安装路径，默认会安装到C:\Users\Administrator\AppData\Local\Programs\Python\Python38目录下。 3.配置python环境变量，即把python的…...
Django序列化器详解：普通序列化器与模型序列化器的选择与运用
系列文章目录 Django入门全攻略：从零搭建你的第一个Web项目Django ORM入门指南：从概念到实践，掌握模型创建、迁移与视图操作Django ORM实战：模型字段与元选项配置，以及链式过滤与QF查询详解Django ORM深度游ÿ…...
Commons-io工具包与Hutool工具包
Commons-io Commons-io是apache开源基金组织提供的一组有关IO操作的开源工具包 作用:提高I0流的开发效率。 FileUtils类(文件/文件夹相关) static void copyFile(File srcFile,File destFile) 复制文件 static void copyDirectory(File srcDir,File destDir) 复…...
ROS中Twist消息类型
Twist消息类型在Robot Operating System (ROS)中是一个常见的数据结构，主要用于描述物体的线性速度和角速度。这种消息类型在ROS的geometry_msgs包中定义，常用于机器人运动控制，尤其是当需要向机器人发布速度指令时。 Twist消息由两个Vector…...
Pixi.js学习 （四）鼠标跟随、元素组合与图片位控
目录 一、鼠标移动跟随 1.1 获取鼠标坐标 1.2 鼠标跟随 二、锚点、元素组合 2.1 锚点 2.2 元素组合 三、图片图层 四、实战 例题一：完成合金弹头人物交互 例题二：反恐重击瞄准和弹痕 例题一代码： 例题二代码： 总结 前言 为了提高作…...
Golang | Leetcode Golang题解之第139题单词拆分
题目： 题解： func wordBreak(s string, wordDict []string) bool {wordDictSet : make(map[string]bool)for _, w : range wordDict {wordDictSet[w] true}dp : make([]bool, len(s) 1)dp[0] truefor i : 1; i < len(s); i {for j : 0; j < i;…...
零代码！用Qwen-Image-2512-ComfyUI轻松制作中文电商配图与营销素材
零代码！用Qwen-Image-2512-ComfyUI轻松制作中文电商配图与营销素材 1. 为什么选择Qwen-Image-2512-ComfyUI 电商运营和内容创作者经常面临一个共同难题：如何快速制作高质量的中文营销素材。传统设计工具需要专业技能，而普通AI绘画工具又难以…...
PyTorch 2.8镜像作品集：基于OpenCV+Torch的实时手势识别视频演示
PyTorch 2.8镜像作品集：基于OpenCVTorch的实时手势识别视频演示 1. 镜像环境与能力概览 PyTorch 2.8深度学习镜像是一个经过深度优化的专业级开发环境，专为现代AI应用设计。这个环境最吸引人的特点是它已经预装了所有必要的工具和库，让你可…...
AQ智商测试
AQ逆商测试结果分析（PSYTOPIC版） Psytopic分析：您的AQ得分是 168 ，在人群中属较高水平 。 以下是PSYTOPIC为您提供的分析参考： 你能面对现实，对来自工作和生活中的困难应对自如，并敢于迎接逆境…...
CDN 无法播放音视频？流媒体回源与 Range 配置修复
流媒体应用现在越来越普及，CDN（内容分发网络）早已成为音视频流畅播放的核心支撑——靠边缘节点就近分发，既能降低延迟，又能减轻源站压力，让用户不用长时间等待就能看高清内容。但实际运维中，“C…...
定制属于自己的AS-I总线
本公司自己已经完成AS-I总线主站、电源、从站模块的纯国产化，可以基于AS-I总线的基础上进行拓展，欢迎有需求的、有想法的各类人士一起撑起AS-I国产化一片天...
RMBG-2.0镜像免配置部署：无需配置Python环境，开箱即用Web交互界面
RMBG-2.0镜像免配置部署：无需配置Python环境，开箱即用Web交互界面 你是不是也遇到过这样的烦恼？想用AI模型给图片换个背景，结果光是安装Python环境、配置依赖库就折腾了大半天，最后还可能因为版本冲突、CUDA不兼容等问…...
【笔试真题】- 招商银行-2026.03.30
📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围在线刷题 bishipass.com 招商银行-2026.03.30 1. 术语接龙计分 问题描述 招商银行的培训平台里有一个简化版“术语接龙”小游戏。 系统维护了一份单词表，并给定一个当前单词。用户之…...
终极指南：如何让2012-2015年老款Mac安装最新macOS系统
终极指南：如何让2012-2015年老款Mac安装最新macOS系统 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 您的2012-2015年老款Mac是否已被苹果官方抛…...
SiameseAOE中文-base高性能部署：WebUI响应＜800ms，吞吐达12QPS（RTX4090）
SiameseAOE中文-base高性能部署：WebUI响应<800ms，吞吐达12QPS（RTX4090） 今天要跟大家聊一个非常实用的工具——SiameseAOE通用属性观点抽取模型。你可能听说过信息抽取，但面对海量文本，如何快速、准确地…...
4款降AI率工具实测横评：最便宜和最贵的效果差多少？
花了几百块，测了一圈，现在把结果告诉你。 降AI率工具、降AI工具保姆级测评2026、降AI这个需求，不同工具之间差距其实挺明显的，不是"随便用一个都一样"。 我的结论：嘎嘎降AI（www.aigcleaner.com…...