jQuerySlideX手风琴效果图片展示
- 作者:网页模板
- 大小:0MB
- 点击次数:
- 发布时间:2014-09-10 10:24
特效介绍
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>
- 本文标签:
- jQuerySlideX,jQuery图片展示