jQuery写手风琴和楼梯效果_jquery楼层楼梯滚动效果-CSDN博客

本文链接：https://blog.csdn.net/qq_41224512/article/details/87446661

手风琴效果代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>手风琴效果</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			img{
				border: none;
				display: block;
			}
				#acc {
					width: 640px;
					height: 140px;
					
					margin: 0 auto;
				}
				#acc ul  {
					border-left:1px solid #ddd ;
					height: 140px;
					position: relative;
				}
				#acc ul li {
					width:50px;
					height: 138px;
					border: 1px solid #ddd;
					float: left;
					list-style: none;
					border-left: 0;
					position: relative;
					overflow: hidden;
				}
				#acc ul li.active {
					width: 434px;
					
				}
				#acc ul li h3 {
					font-size: 14px;
					color: #000;
					font-weight:100;
					width: 14px;
					height: 98px;
					padding: 40px 18px 0;
					
				}
				#acc ul li h3.active {
					background: #f42760;
					color: #fff;
				}
				#acc ul li  div {
					width: 383px;
					height: 138px;
					background: blue;
					position: absolute;
					top: 0;
					left: 50px;
					border-left:1px solid #ddd ;
					z-index: 0;
				}
				#acc ul li img{
					width: 383px;
					height: 138px;
				}
				#acc ul li.last {
					position: absolute;
					top: 0;
					right: 0;
				}
				
		</style>
	</head>

	<body>
		<div id="acc">
			<ul>
				<li class="active">
					<h3 class="active">红玫瑰</h3>
					<div><img src="img/bg1.jpg"></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg2.jpg"></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg3.jpg"></div>
				</li>
				<li>
					<h3>白玫瑰</h3>
					<div><img src="img/bg4.jpg"></div>
				</li>
				<li class="last">
					<h3>白玫瑰</h3>
					<div><img src="img/bg5.jpg"></div>
				</li>
			</ul>

		</div>
		//引入jquery文件
		<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
		<script type="text/javascript">
			$(function(){
				//console.log($("ul>li"))
				$("ul>li").mouseover(function() {
					$(this).stop().animate({"width":"434px"},500)
					.find("h3").addClass("active")
					.end().siblings().stop().animate({"width":"50px"},500)
					.find("h3").removeClass("active");
				})
			})
		</script>
	</body>

</html>

楼梯效果代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body,ul,li{
				padding: 0;
				margin: 0;
				text-align: center;
				line-height: 1000px;
			}
			li{
				list-style: none;
			}
			#header,#footer{
				font-size:40px;
			}
			#floorNav{
				display: none;
				position: fixed;
				top: 100px;
				left: 50px;
				width: 32px;
				border: 1px solid #CECECE;
			}
		
			#floorNav li{
				position: relative;
				width: 32px;
				height: 32px;
				border-bottom: 1px solid #CECECE;
				text-align: center;
				line-height: 32px;
				font-size: 12px;
			}
			
			#floorNav span{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				width: 32px;
				height: 32px;
				background: red;
				color: white;
			}
			
			#floorNav li:hover span,#floorNav li span.hover{
				display: block;
			}
			
			#floorNav li:last-child{
				background: red;
				color: white;
				border-bottom: none;
			}
			#header,#footer{
				width: 1000px;
				height: 1000px;
				background: darkgoldenrod;
				margin: 0 auto;
			}
			
			#content li{
				width:1000px;
				height: 600px;
				margin: 0 auto;
				font-size: 40px;
				text-align: center;
				line-height: 600px;
			}
		</style>
	</head>

	<body>
		<div id="floorNav">
			<ul>
				<li>1F<span  class="hover">服饰</span></li>
				<li>2F<span>美妆</span></li>
				<li>3F<span>手机</span></li>
				<li>4F<span>家电</span></li>
				<li>5F<span>数码</span></li>
				<li>6F<span>运动</span></li>
				<li>7F<span>居家</span></li>
				<li>8F<span>母婴</span></li>
				<li>9F<span>食品</span></li>
				<li>10F<span>图书</span></li>
				<li>11F<span>服务</span></li>
				<li>TOP</li>
			</ul>
		</div>
		<div id="header">TOP</div>
		<div id="content">
			<ul>
				<li style="background: #8B0000;">服饰</li>
				<li style="background: #123;">美妆</li>
				<li style="background: #667;">手机</li>
				<li style="background: #558;">家电</li>
				<li style="background: #900;">数码</li>
				<li style="background: #456;">运动</li>
				<li style="background: #789;">居家</li>
				<li style="background: #234;">母婴</li>
				<li style="background: #567;">食品</li>
				<li style="background: #887;">图书</li>
				<li style="background: #980;">服务</li>
			</ul>
		</div>
		<div id="footer">FOOTER</div>
		<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
		<!--<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>-->
		<script type="text/javascript">
			$(function(){
				//console.log($("#floorNav li"));
				var Moving=false;//定义是否点击了按钮页面正在动画移动
				$("#floorNav li:not(:last)").click(function(){
					var index = $(this).index();
                    var _top = $("#content li").eq(index).offset().top;
                    Moving = true;
                    $("html, body").stop().animate({scrollTop:_top}, 400, function(){
                        Moving = false;
                    });
				});
				//点击TOP回到顶部
				$("#floorNav li:last").click(function(){
					$("html, body").animate({scrollTop:0},1000);
				});
				//滚动滚动条选择楼层
				$(window).scroll(function(){
					var top=$(window).scrollTop();
					if(top>=1000){
						$("#floorNav").show();
					}else if(top<400){
						$("#floorNav").hide();
					}
					var index = 0;
                        $("#content li").each(function(){
                            if (top>= $(this).offset().top ){
                                //console.log( $(this).index() );
                                index = $(this).index();
                            }
                        });
                        $("#floorNav li").eq(index).find("span").addClass("hover")
                        .parent().siblings().find("span").removeClass("hover");
				});
			});
		</script>
	</body>
</html>