手风琴源码

最新推荐文章于 2024-05-15 10:11:07 发布

高辉

最新推荐文章于 2024-05-15 10:11:07 发布

阅读量251

点赞数 1

分类专栏：前端文章标签：手风琴前端手风琴手风琴源码

本文链接：https://blog.csdn.net/ZJX103RLF/article/details/79409842

版权

2 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="{CHARSET}">
	<title></title>
	<meta charset="utf-8" />
	<style>
	*{
	margin: 0;
	padding: 0;
	}
	.a{
	width: 1352px;
	height: 648px;
	border: 1px solid #000;
	margin: 10px auto;
	}
	.a .b{
	width: 100%;
	height: 100%;
	}
	.a .b li{
	float: left;
	width: 50px;
	list-style: none;
	height: 100%;
	background: url('img3/11.jpg');
	cursor: pointer;
	transition: 1s;
	}
	.a .b li:nth-child(1){
	width: 1152px;
	}
	.a .b li:nth-child(2){
	background: url('img3/22.jpg');
	}
	.a .b li:nth-child(3){
	background: url('img3/33.jpg');
	}
	.a .b li:nth-child(4){
	background: url('img3/44.jpeg');
	}
	.a .b li:nth-child(5){
	background: url('img3/55.jpg');
	}
	</style>
	</head>
	<body>
	<div class="a">
	<ul class="b">
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	</ul>
	</div>
	<script src="js/jquery.min.js"></script>
	<script>
	$(function(){
	$(".a .b li").click(function(){
	$(this).width(1152).siblings().width(50);
	});
	});
	</script>
	</body>
	</html>

关注

专栏目录