• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 特效插件 > 滚动图片 >  jQuerySlideX手风琴效果正文

jQuerySlideX手风琴效果图片展示

作者:网页模板
大小:0MB
点击次数:
发布时间:2014-09-10 10:24
分享到:

特效介绍

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

  • 本文标签:
  • jQuerySlideX,jQuery图片展示
带缩略图的jQuery图片轮播代码
支持全屏的图片相册jQuery插件