jquery实现手风琴

最新推荐文章于 2022-11-20 20:53:52 发布

云之前端

最新推荐文章于 2022-11-20 20:53:52 发布

阅读量356

点赞数 1

分类专栏： js案列学习总结文章标签： js之手风琴

本文链接：https://blog.csdn.net/qq_44586361/article/details/89287571

版权

学习总结同时被 2 个专栏收录

36 篇文章 0 订阅

订阅专栏

js案列

1 篇文章 0 订阅

订阅专栏

效果图：
在这里插入图片描述
如下是我的代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" cintent="">
	<title>js之手风琴</title>
<style>
	body{margin:0;}
	body,html{position:relative;height:100%;}
	p{margin:0;}
	ul{list-style: none;margin:0;padding-left:0;}
	.wrap{position:absolute;width:100%;height:100%;background:url("image/1.jpg") no-repeat center/cover;}
    .wrap:nth-child(2){
    	background-image: url("image/2.jpg");
    }
    .wrap:nth-child(3){
    	background-image: url("image/3.jpg");
    }
    .wrap:nth-child(4){
    	background-image: url("image/4.jpg");
    }
    .content{position:absolute;top:50%;left:50%;width:1089px;height:429px;transform:translate(-50%,-50%);}
    .list{
    	width:100px;
    	height:429px;
    	background-image:url("image/1.jpg");
    	float:left;
    }
    .list:nth-child(2){
    	background-image:url("image/2.jpg");
    }
    .list:nth-child(3){
    	background-image:url("image/3.jpg");
    }
    .list:nth-child(4){
        width: 789px;
    	background-image:url("image/4.jpg");
    }
    .list div{
       width:100px;
       height:429px;
       background-color: rgba(0,0,0,0.5);
    }
    .list div p{
    	padding:10px 40px;
    	color:rgba(255,255,255,0.5);
        font-size:35px;
    }
</style>
</head>
<body>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="wrap"></div>
    <div class="content">
    	<ul>
    		<li class="list">
    			<div>
    				<p>我的小旅行 || 故事一</p>
    			</div>
    		</li>
    		<li class="list">
    			<div>
    				<p>我的小旅行 || 故事二</p>
    			</div>
    		</li>
    		<li class="list">
    			<div>
    				<p>我的小旅行 || 故事三</p>
    			</div>
    		</li>
    		<li class="list">
    			<div>
    				<p>我的小旅行 || 故事四</p>
    			</div>
    		</li>
    	</ul>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.0.js"></script>
    <script>
    	var li=$(".list");
    	li.click(function(){
    		var index=$(this).index()
    		$(this).stop().animate({
           width:"789px"
    		},200).siblings("li").stop().animate({
            width:"100px"
    		},200);
    		$(".wrap").eq(index).fadeIn().siblings(".wrap").fadeOut();
    	})
    </script>
</body>
</html>

云之前端

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery实现手风琴

效果图：如下是我的代码：<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="keywords" cintent=""> <title>js之手风琴</title><style> body{margin:0;} b...
复制链接

扫一扫