jQuery案例

手风琴

<style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .wrap{
             1178px;
            height: 174px;
            overflow: hidden;
            position: relative;
            margin: 0 auto;

        }
        .wrap  ul li{
            float: left;
             210px;
            height: 174px;
            overflow: hidden;
        }
        .wrap  ul{
             2000px;
        }
        .wrap  ul li img{
             550px;
            height: 174px;
        }
    </style>

<body>
    <div class="wrap">
            <ul>
                <li style='550px'><img src="http://pic.shejiben.com/hot_sjb/377_8180.jpg?1462261126" alt=""></li>
                <li ><img src="http://pic.shejiben.com/hot_sjb/377_8288.jpg?1464830033" alt=""></li>
                <li ><img src="http://pic.shejiben.com/hot_sjb/377_8155.jpg?1460709517" alt=""></li>
                <li ><img src="http://pic.shejiben.com/hot_sjb/377_7937.jpg?1456984280" alt=""></li>
            </ul>
        </div>
</body>

<script>
    $(".wrap").find("li").click(function(){
        $(this).stop().animate({
            550
        })
        $(this).siblings().stop().animate({
            210
        })
    })
</script>

艺龙酒店

<script>
        
        $("#main").find("li").mouseover(function(){
            $(this).stop().animate({
                400
            })
            .children(".des").stop().hide()
            .parent().siblings().stop().animate({
                160
            })
            .children(".des").stop().show();
        })
        $("#main").find("li").mouseout(function(){
            $("#main").find("li").stop().animate({
                200
            }).children(".des").stop().show()
        })
    
    </script>
    
<body>
		<div id="main">
			<ul>
				<li>
					<div class="des"><h4>园林酒店</h4></div>
					<div style="background: url(img/1.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>设计师酒店</h4></div>
					<div style="background: url(img/2.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>青年旅社</h4></div>
					<div style="background: url(img/3.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>特色客栈</h4></div>
					<div style="background: url(img/4.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>海岛酒店</h4></div>
					<div style="background: url(img/5.jpg) center;"></div>
				</li>
				<li>
					<div class="des"><h4>海外温泉</h4></div>
					<div style="background: url(img/6.jpg) center;"></div>
				</li>
			</ul>
		</div>
		
    </body>

<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			ul li {
				list-style: none;
			}
			#main {
				 100%;
				height: 260px;
				margin: 40px 5%;
			}
			.top {
				 100%;
			}
			#main ul li {
				 200px;
				height: 260px;
				float: left;
				position: relative;
			}
			#main ul li div {
				 100%;
				height: 260px;
			}
			#main ul li div.des {
				position: absolute;
				left: 0;
				top: 0;
				background: rgba(0,0,0,.3);
				
				}
				#main ul li div.des h4 {
					color: #FFF;
					font-size: 30px;
					padding: 30px;
					 30px;
					margin: 0 auto;
					
				}
		</style>

原文地址:https://www.cnblogs.com/sansancn/p/10914493.html