jQuerySlideX手风琴效果图片展示

    jQuerySlideX，CSS3+jQuery横向手风琴折叠图片展示效果。刚开始是五个bar，点击bar，对应的图片会展开，点击其他bar，其兄弟节点的图片会收起。效果不错。
1、css样式：

<style>
.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>

2、js代码：

<script src="http://www.5imoban.net/download/jquery/jquery-1.8.3.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>

3、html代码：

<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>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！