手风琴方式展现的图片展示效果

手风琴方式展现的图片展示效果:
图片展示效果多种多样，例如最为流行的滚动方式，不过这个大家已经司空监管了，不会感到有什么新奇的，本章节分享一段类似于手风琴式图片展现效果，并且还有分类功能，希望能够给需要的朋友带来一定的帮助。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
* 
{
  margin:0px;
  padding:0px;
}
ul{list-style:none}
div.stu_style 
{
  border-radius:5px;
  box-shadow:0px 1px 2px 1px #a9d6d8;
  background:#fff;
  margin:10px;
  padding:10px;
  width:920px;
}
div.stu_style div.inner_exp 
{
  height:140px;
  width:919px;
  overflow:hidden;
  position:relative;
}
div.stu_style div.one_exp 
{[/size]
[size=2]  top:10px;
  position:absolute;
  z-index:1;
  height:140px;
  width:857px;
}
div.stu_style div.one_exp span 
{
  display:block;
  float:left;
  width:16px;
  height:103px;
  font-size:14px;
  color:#ffe094;
  font-weight:bold;
  background:#fda000;
  padding:37px 7px 0 7px;
  cursor:pointer
}
div.stu_style div.one_exp span.on 
{
  background:#ffc946;
  color:#ffffff
}
div.stu_style div.exp_2 
{
  left:31px;
  z-index:2;
}
div.stu_style div.exp_3 
{
  left:62px;
  z-index:3;
}
div.stu_style div.one_exp ul 
{
  width:817px;
  height:140px;
  float:left;
  background:#ececec;
  padding-left:10px;
}
div.stu_style div.one_exp ul li 
{
  width:144px;
  height:94px;
  float:left;
  display:inline;
  padding:3px;
  background:#fff;
  box-shadow:0px 0px 2px #999;
  margin:20px 0 0 10px;
}
div.stu_style div.one_exp ul li img 
{
  width:144px;
  height:94px;
  border:0px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var acCordion=function(){
    var _wrap=$(".stu_style");
    var _oneExp=_wrap.find(".one_exp");
    var _aniWidth=_oneExp.find("ul").width()+10;
    var _num=_oneExp.length;
    _oneExp.find(" span").click(function(){
      if($(this).hasClass("on"))
      {
        return false;
      }   
      var _inx=$(this).parent(".one_exp").index();
      for(var i=0;i<=_inx;i++)
      {
        _oneExp.eq(i).animate({"left":(30*i+1*i)+"px"},500)
      }
      for(var i=_inx+1;i<_num;i++)
      {
        _oneExp.eq(i).animate({"left":(30*i+_aniWidth+i*1)+"px"},500)
      }
      $(this).addClass("on").parent().siblings().find("span").removeClass("on");
    })
  }() 
})
</script>
</head>
<body>
<div class="stu_style">
  <div class="inner_exp">
    <div class="one_exp"> <span>欧美风光</span>
      <ul>
        <li><a href="#"><img src="mytest/demo/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/6.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div class="one_exp exp_2"> <span>绝美自然</span>
      <ul>
        <li><a href="#"><img src="mytest/demo/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/6.jpg" alt="" /></a></li>
      </ul>
    </div>
    <div class="one_exp exp_3"> <span class="on">心怡荒野</span>
      <ul>
        <li><a href="#"><img src="mytest/demo/2.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/3.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/4.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/5.jpg" alt="" /></a></li>
        <li><a href="#"><img src="mytest/demo/6.jpg" alt="" /></a></li>
      </ul>
    </div>
  </div>
</div>
</body>
</html>

以上代码实现了我们的要求，下面介绍一下此特效的实现过程。

首先简单介绍一下CSS是如何控制布局的，在默认情况下，只会在特效的右侧才会显示图片，而左侧则是显示分类标题，也就是说只会显示一个div中的图片，其他的图片之所以没显示，是因为放置图片的三个div块是采用的绝对定位，而左侧的两个div的z-index值要小，所以被遮挡了，并且通过调整left属性值使相应的div只显示标题部分即可，具体不多说了，思路大致如此。
一.js代码注释:
1.$(document).ready(function(){})，当稳当结构完全加载完毕再去执行函数中的代码。
2.var acCordion=function(){}()，声明并执行一个函数。
3.var _wrap=$(".stu_style")，获取class属性值为stu_style的对象。
4.var _oneExp=_wrap.find(".one_exp")，获取上面获取的对象下，class属性值为one_exp的对象。
5.var _aniWidth=_oneExp.find("ul").width()+10，这里之所以添加10，是为了是图片左右两端的灰色区域宽度相等，由于li元素的10px左边内边距和ul的10px左右内边距会造成图片左边的灰色区域是20px，右边只是10px，所以要10。
6.var _num=_oneExp.length，获取存放图片的div块的数目。
7._oneExp.find(" span").click(function(){})，为标题注册click事件处理函数。
8.if($(this).hasClass("on")){return false;}，判断当前点击的span元素是否具有名称为on的class属性，也就是判断当前图片栏目是否完全处于展示状态，如果处于展开状态，则跳出函数。
9.var _inx=$(this).parent(".one_exp").index()，获取当前被点击标题（span元素）的class属性值为one_exp的父元素的索引值。
10.for(var i=0;i<=_inx;i++)，通过遍历设置相应放置图片的div的left属性值，它的功能是让索引值小于等于当前被点击标题所在div索引的div向左移动，也就是满足展现当前被点击标题所在div的第一个条件。
11._oneExp.eq(i).animate({"left": (30*i+1*i)+"px"},500)，通过动画方式设置，值的大小是根据span标题的宽度和为了设置两个相邻的标题之间间隔1px而确定的。
12.for(var i=_inx+1;i<_num;i++)，如果说上面的注释9满足了第一个条件，那么这个就满足了第二个条件，也就是设置所以值大于当前被点击标题所在div索引的div的left属性值，也就是让满足这些条件的div向右移动。
13._oneExp.eq(i).animate({"left": (30*i+_aniWidth+i*1)+"px"},500)，原理和上面是一样。
14.$(this).addClass("on").parent().siblings().find("span").removeClass("on")，为当前点击的标题（span）添加class属性on，并且移除其他span的属性值为on的class。
二.相关阅读:
1.find()函数可以参阅jQuery的find()方法一章节。
2.width()函数可以参阅jQuery的width()方法一章节。
3.click事件可以参阅jQuery的click事件一章节。
4.hasClass()函数可以参阅jQuery的hasClass()方法一章节。
5.parent()函数可以参阅jQuery的parent()方法一章节。
6.index()函数可以参阅jQuery的index()方法一章节。
7.eq()函数可以参阅jQuery的eq()方法一章节。
8.animate()函数可以参阅jQuery的animate()方法一章节。
9.addClass()函数可以参阅jQuery的addClass()方法一章节。
10.siblings()函数可以参阅jQuery的siblings()方法一章节。
11.removeClass()函数可以参阅jQuery的removeClass()方法一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=10904

更多内容可以参阅:http://www.softwhy.com/jquery/

手风琴方式展现的图片展示效果

猜你喜欢