菜单 搜索
首页 前端知识 使用CSS、JavaScript、jQuery三种方式实现手风琴效果

使用CSS、JavaScript、jQuery三种方式实现手风琴效果

2024-06-16 09:06:02 前端知识 前端哥 618 871 我要收藏

手风琴效果有不少，王者荣耀官网（源网址 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>
转载请注明出处或者链接地址：https://www.qianduange.cn//article/12391.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

情人节程序员用HTML网页表白【爱的计时】 HTML5七夕情人节表白网页源码 HTML CSS JavaScript

2024-06-22 01:06:05

html5 标签的分类及样式的分类和优先级

2024-06-22 01:06:04

前端开发 4: jQuery

2024-06-22 01:06:02

基于javaweb mysql的ssm固定资产管理系统(java ssm jsp jquery bootstrap mysql)

2024-06-22 01:06:36

基于html5的国家历史文物网站的设计与实现-计算机毕业设计源码63653

2024-02-03 12:02:00

无涯教程-jQuery - Button组件函数

2024-06-22 01:06:21

计算机毕业设计 基于html5的图书管理系统的设计与实现 Java实战项目 附源码 文档 视频讲解

2024-06-22 01:06:18

网页开发 HTML

2024-06-22 01:06:17

HTML:七天学会写基础网页11

2024-06-22 01:06:13

Web前端资深架构师分享学习经验及总结，jQuery入门到精通（四，2024最新前端笔经

2024-06-22 01:06:10

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！