网页制作---手风琴效果

最新推荐文章于 2023-10-25 16:14:45 发布

阳光搬运工

最新推荐文章于 2023-10-25 16:14:45 发布

阅读量185

点赞数

分类专栏： web前端基础笔记文章标签： css html5 json

本文链接：https://blog.csdn.net/weixin_57097732/article/details/119829861

版权

笔记同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

web前端基础

30 篇文章 0 订阅

订阅专栏

废话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴效果</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
			list-style: none;
		}
		body{
			height: 100vh;
			background: url(img/1.jpg);
			background-size: cover;
			background-position: center center; 
			display: flex;
			justify-content: center;
			align-items: center;
		}
		ul{
			width: 800px;
			height: 400px;
		}
		li{
			width: 80px;
			height: 100%;
			float: left;
			background-size: cover;
			background-position:center center ;
			/* 过渡属性 */
			transition: .3s;
		}
		li p{
			width: 5rem;
			height: 100%;
			background-color:rgba(255,255,255,.5);
			color: white;
			font-size: 45px;
			
		}
		.open{
			width: 480px;
		}
	</style>
</head>
<body>
	<ul>
		<li class="open" style="background-image: url(img/1.jpg);">
			<p>关帅帅</p>
		</li>
		<li style="background-image: url(img/2.jpg);">
			<p>关小帅</p>
		</li>
		<li style="background-image: url(img/3.jpg);">
			<p>关大帅</p>
		</li>
		<li style="background-image: url(img/4.jpg);">
			<p>关太帅</p>
		</li>
		<li style="background-image: url(img/5.jpg);">
			<p>关帅飞</p>
		</li>
	</ul>
<script type="text/javascript">
//获取li
	var lis = document.getElementsByTagName("li");
	
	for(var i=0; i<lis.length; i++){
		lis[i].onclick=function(){
			// 收起来已经展开的li
			//1.使用for循环全部去掉open
			for(var j=0;j<lis.length;j++){
				lis[j].className="";
			}
		    //展开点击的li（this）
			this.className="open";
			// 修改背景图
			document.body.style.backgroundImage=this.style.backgroundImage;
		}
		
	}
</script>
</body>

</html>

运行效果：

阳光搬运工

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页制作---手风琴效果

废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>手风琴效果</title> <style type="text/css"> *
复制链接

扫一扫