使用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;…...
label-studio的使用教程(导入本地路径)
文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
《Playwright：微软的自动化测试工具详解》
Playwright 简介:声明内容来自网络，将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具，支持 Chrome、Firefox、Safari 等主流浏览器，提供多语言 API（Python、JavaScript、Java、.NET）。它的特点包括&a…...
渗透实战PortSwigger靶场-XSS Lab 14：大多数标签和属性被阻止
<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet： https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...
【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍，多层嵌套定位示例
文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解（初学者版） 1. static（默认值） 2. relative（相对定位） 3. absolute（绝对定位） 4. fixed（固定定位） 5. sticky（粘性定位） 三、定位元素的层级关系（z-i…...
Python实现prophet 理论及参数优化
文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候，写过一篇简单实现，后期随着对该模型的深入研究，本次记录涉及到prophet 的公式以及参数调优，从公式可以更直观…...
什么是Ansible Jinja2
理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...
Maven 概述、安装、配置、仓库、私服详解
目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...
python执行测试用例，allure报乱码且未成功生成报告
allure执行测试用例时显示乱码：‘allure’ �����ڲ����ⲿ���Ҳ���ǿ�&am…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库，专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性，并提供了一个通用的框架&…...