Ruby's Louvre

每天学习一点点算法

导航

纯CSS相册2

这部分的思路可以说全部秉承《a:hover应用精粹》一文，因为事实证明，锚点切换的效果不好（要劳驾用户的尊手多动一下啦，点之后页面会跳动啦，并且不兼容opera）。这部分的效果比较眩目，但难度绝对不会超过“推搡式放大效果”。

它的结构层与《a:hover应用精粹》的后三个示范出奇的相似。CSS也足够强大地表达出我们想要新效果。

 
<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
//**************略*********
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美"  />
      <span>
        <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" />
      </span>
    </a>
  </li>
</ul>

用到的图片比较多，但结构我们应该很熟悉。一共32张，其实只是16张，每张重复使用2次（大图与小图）。我们要做的出效果，图片分析4行排列，每行4张，鼠标移到小图上面，对应的大图会在小图左上方出现，并遮住小图。实现思路是，限制UL元素的大小，并且LI元素全部左浮动。大图我们一开始就隐藏起来，当移动到小图上时，我们显示大图，并用绝对定位设置大图的位置，包含块设在A元素上。

  ul#album, #album li{
    margin:0;
    padding:0;
    list-style:none;
  }
  ul#album{/*第1层*/
    width:400px;
    height:300px;
  }
  #album img {
    border:none;/*默认存在边框，为了精确控制，我们清除它*/
    display:block;/*li img下方多出5px空白bug*/
    width:100px;/*默认平时都以小图形式显示*/
    height:75px;
  }
  #album li{/*第2层*/
    float:left;/*用于平行排列与换行*/
  }

  #album span {
    display:none;/*平时隐藏大图*/
  }
  #album a:hover {
    position:relative;
  }
  #album a:hover span{/*第3层*/
    display:block;
    position:absolute;
    left:-50px;/*左移距离为小图的宽的一半*/
    top:-37px;/*上移距离为小图的高的一半*/
  }
  #album a:hover span img{
    width:200px;/*我们原图实现太大了，所以也要缩小一下*/
    height:150px;
  }

但需要的图片太多了，换言之，请求数也很多，这对服务器的压力很大，有没有办法砍掉一些呢？？能！因为我们可以通过hover切换相应图片的大小，就不需要span那一部分了。于是结构层更简单。

 
<ul id="album">
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s002.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s003.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s004.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
 //****************略************
  <li>
    <a href="http://www.cnblogs.com/rubylouvre/">
      <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s016.jpg" alt="纯CSS相册 by 司徒正美" class="small" />
    </a>
  </li>
</ul>

 
  ul#album, #album li{
    margin:0;
    padding:0;
    list-style:none;
  }
  ul#album{/*第1层*/
    width:400px;
    height:300px;
  }
  #album li{/*第2层*/
    float:left;
    width:100px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
    height:75px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
  }
  #album img{
    border:none;/*默认存在边框，为了精确控制，我们清除它*/
    display:block;/*li img下方多出5px空白bug*/
    width:100px;/*默认平时都以小图形式显示*/
    height:75px;
  }
  #album a:hover {
    position:relative;/*成为包含块*/
  }

  #album a:hover img{/*只有由hover激活的img才位于第3层*/
    position:absolute;
    left:-50px;/*上移小图的宽的一半*/
    top:-37px;/*上移小图的高的一半*/
    width:200px;
    height:150px;
  }

这次竟然发现在chrome出现问题，症状是大图总是出现第一幅小图之上，而不是我们鼠标指向那个小图上。留意我们的小图其实位于A元素上，而A元素为大图的包含块。不过A元素好像什么也没有设置，我们给点东西A做延缓A的渲染速度，可能chrome做了过多的内部优化……在样式中添加：

  /*[修复chrome绝对定位错乱Bug*/
  #album li a{
    display:block;/*让具有盒子模型*/
    width:100px;
    height:75px;
  }
  /*******完*****]*/

posted on 2009-09-21 08:19  司徒正美  阅读(4008)  评论(22)  编辑  收藏  举报