jQuery案例
手风琴
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
.wrap{
width: 1178px;
height: 174px;
overflow: hidden;
position: relative;
margin: 0 auto;
}
.wrap ul li{
float: left;
width: 210px;
height: 174px;
overflow: hidden;
}
.wrap ul{
width: 2000px;
}
.wrap ul li img{
width: 550px;
height: 174px;
}
</style>
<body>
<div class="wrap">
<ul>
<li style='width: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({
width:550
})
$(this).siblings().stop().animate({
width:210
})
})
</script>
艺龙酒店
<script>
$("#main").find("li").mouseover(function(){
$(this).stop().animate({
width:400
})
.children(".des").stop().hide()
.parent().siblings().stop().animate({
width:160
})
.children(".des").stop().show();
})
$("#main").find("li").mouseout(function(){
$("#main").find("li").stop().animate({
width: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 {
width: 100%;
height: 260px;
margin: 40px 5%;
}
.top {
width: 100%;
}
#main ul li {
width: 200px;
height: 260px;
float: left;
position: relative;
}
#main ul li div {
width: 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;
width: 30px;
margin: 0 auto;
}
</style>
