<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3+jQuery 横向手风琴折叠效果-脚本之家脚本之家www.jb51.net</title>
<style>
body{
margin:0;
padding:0;
background:url(images/hat2.jpg) #400B4F no-repeat;
}
.container{
width:700px;
height:500px;
margin:70px auto 10px auto;
}
.handle{
float:left;
margin:0 2px;
width:50px;
height:500px;
cursor:pointer;
background:#F0F;
font:bold 24px Arial, Helvetica, sans-serif;
text-align:center;
color:#FFF;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-webkit-transition:0.3s ease-in-out;
-moz-transition:0.3s ease-in-out;
-o-transition:0.3s ease-in-out;
-ms-transition:0.3s ease-in-out;
}
.handle:hover{
background:#FC3;
-webkit-transform:scale(1.02);
-moz-transform:scale(1.02);
-ms-transform:scale(1.02);
-o-transform:scale(1.02);
}
.select{
background:#FC3;
}
.slide{
background:url(images/grey.png);
float:left;
width:380px;
height:500px;
display:none;
margin:0 4px;
-webkit-border-radius:25px;
-moz-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
}
img{
background:#FFF;
display:block;
width:280px;
height:450px;
margin:20px auto;
padding:5px;
}
.rotate{
margin:50px auto;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
}
</style>
<script src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var j = 1;
$(".handle").each(function(){
if($.browser.msie&&($.browser.version <= "8.0"))
{
$(this).children("p").html(j);
j++;
}
else{
var i = $(this).attr("id");
$(this).children("p").html(i);
}
})
$(".handle").click(function(){
if(!$(this).siblings(".slide").is(":visible")){
$(this).addClass("select");
$(this).siblings(".slide").animate({width:"show"},300);
$(this).parent().siblings().children(".slide").animate({width:"hide"},300);
$(this).parent().siblings().children(".handle").removeClass("select");
}
else{
$(this).siblings(".slide").animate({width:"hide"},300);
$(this).removeClass("select");
}
})
})
</script>
</head>
<body>
<div class="container">
<div>
<div class="handle" id="one"><p class="rotate"></p></div>
<div class="slide"><img src="images/1.jpg" /></div>
</div>
<div>
<div class="handle" id="two"><p class="rotate"></p></div>
<div class="slide"><img src="images/2.jpg" /></div>
</div>
<div>
<div class="handle" id="three"><p class="rotate"></p></div>
<div class="slide"><img src="images/3.jpg" /></div>
</div>
<div>
<div class="handle" id="four"><p class="rotate"></p></div>
<div class="slide"><img src="images/4.jpg" /></div>
</div>
<div>
<div class="handle" id="five"><p class="rotate"></p></div>
<div class="slide"><img src="images/5.jpg" /></div>
</div>
</div>
<!--广告区域开始-->
<div style="height:90px; width:728px; padding-top:10px; margin:0px auto; ">
</div>
<p style="text-align:center;">代码整理：<a href="http://www.jb51.net/jiaoben/" target="_blank">脚本之家脚本下载</a></p>
<p style="text-align:center;">＊尊重他人劳动成果，转载请自觉注明出处！注：此代码仅供学习交流，请勿用于商业用途。</p>
<p></p>
<!--广告区域结束-->
</body>
</html>
基于jQuery+css的横向手风琴折叠效果.zip （9个子文件） 
132689876902162926 likecs.com_132689876914684929 jquery_shoufengqin 
jquery-1.6.1.min.js 89KB images 
grey.png 4KB
2.jpg 12KB 1.jpg 14KB hat2.jpg 42KB 3.jpg 14KB 5.jpg 16KB 4.jpg 17KB
index.html 4KB资源评论
