利用Jquery实现百叶窗效果

最新推荐文章于 2024-11-18 09:16:20 发布

superwoman_yy

最新推荐文章于 2024-11-18 09:16:20 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： jquery html

本文链接：https://blog.csdn.net/superwoman_yy/article/details/78253251

前端专栏收录该内容

6 篇文章

订阅专栏

这篇博客介绍如何利用jQuery实现一个百叶窗式的图片切换效果。通过点击导航条，不同图片会以百叶窗展开的方式逐渐显示，营造出独特的视觉体验。涉及到的关键技术和元素包括jQuery选择器、事件监听、CSS3动画以及HTML结构布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/jquery-1.11.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
					$("ul li").click(function(){
						var $index = $(this).index();
						$(".wrap .split").each(function(index,element){
							$(element).find(".img").eq($index).removeClass("hide").addClass("show").siblings(".show").removeClass("show").addClass("hide");
						})
					})
				}
					
				)
		</script>
		<style>
			body{
				margin: 0px;
				padding: 0px;
			}
			.wrap{
				width:1152px;
				height:648px;
				margin: 0px auto;
			}
			.wrap .split{
				width:192px;
				height:648px;
				position:relative;
				overflow: hidden;
				float: left;
			}
			
			.wrap .split .img{
				width:192px;
				height:648px;
				background: url('img/11.jpg');
				position: absolute;
				top:0px;
				left:192px;
			}
			.wrap  .split .img:nth-child(2){
				background: url('img/22.jpg');
			}
			.wrap  .split .img:nth-child(3){
				background: url('img/33.jpg');
			}
			.wrap  .split .img:nth-child(4){
				background: url('img/44.jpeg');
			}
			.wrap  .split .img:nth-child(5){
				background: url('img/55.jpg');
			}
			.wrap .split:nth-child(2) .img{
				background-position:-192px 0px ;
			}
			.wrap .split:nth-child(3) .img{
				background-position:-384px 0px ;
			}
			.wrap .split:nth-child(4) .img{
				background-position:-576px 0px ;
			}
			.wrap .split:nth-child(5) .img{
				background-position:-768px 0px ;
			}
			.wrap .split:nth-child(6) .img{
				background-position:-960px 0px ;
			}
			@-webkit-keyframes in{
				0%{left:192px}
				100%{left:0px}
			}
			@-webkit-keyframes out{
				0%{left:0px}
				100%{left:-192px}
			}
			.wrap .split .show{
				-webkit-animation:in 3s;
				left: 0px;;
			}
			.wrap .split .hide{
				-webkit-animation:out 3s;
				left:192px;
			}
			ul{
				position: absolute;
				right: 80px;
				bottom: 20px;
			}
			li{
				display: inline-block;
				list-style: none;
				width: 30px;
				height:30px;
				opacity:0.6;
				border-radius:15px;
				background: yellow;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="split">
				<div class="img show"></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
			</div>
			<div class="split">
				<div class="img show"></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
			</div>
			<div class="split">
				<div class="img show"></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
			</div>
			<div class="split">
				<div class="img show"></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
			</div>
			<div class="split">
				<div class="img show"></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
			</div>
			<div class="split">
				<div class="img show"></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
				<div class="img "></div>
			</div>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</body>
</html>