手风琴

Posted 2022-09-21 qilin0

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手风琴相关的知识，希望对你有一定的参考价值。

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>横向手风琴</title>
	<style>
	* margin: 0;padding: 0;
	.container
	width: 1000px;
	height: 400px;
	margin: 0 auto;
	margin-top: 120px;
	box-shadow: 0 0 4px black;

	/* 关键点就是将ul设置为弹性盒，然后通过flex-grow来对每个li进行控制 */
	ul
	width: 100%;
	height: 100%;
	list-style: none;
	display: flex;

	li
	width: 70px;
	height: 100%;
	overflow: hidden;
	transition: .5s;

	.current
	flex-grow: 10; /* 将当前的li的flex-grow值设置为10 */

	</style>
	</head>

	<body>
	<div class="container">
	<ul>
	<li class="current"><img src="./img/1.jpg" height="400"></li>
	<li><img src="./img/2.jpg" height="400"></li>
	<li><img src="./img/3.jpg" height="400"></li>
	<li><img src="./img/4.jpg" height="400"></li>
	<li><img src="./img/5.jpg" height="400"></li>
	</ul>
	</div>
	<script>
	// 获取DOM元素
	let li = document.getElementsByTagName("li");
	let container = document.getElementsByClassName("container")[0];
	let enter = function ()
	// 首先使用for循环将所有的li的class值给清空
	for(let i=0;i<li.length;i++)

	li[i].className = "";

	// 然后再将当前的li的class赋值为current
	this.className = "current";

	// 通过for循环给所有的li添加mouseenter事件
	for (let i = 0; i < li.length; i++)
	li[i].addEventListener("mouseenter", enter, false);

	</script>
	</body>

	</html>

以上是关于手风琴的主要内容，如果未能解决你的问题，请参考以下文章