Css相册 - 爱码网

　　对于相册，大家都很熟悉，常见的一种如下图所示：

　　 Css相册

　　当你点击下面的数字的时候，就会换一张图片，直接用链接就可以实现，很简单。下面我们将介绍其他两种css相册。

第一种css相册：

　　我们先来看看示意图：

Css相册

　　当鼠标移到某张图片时，这张图片会放大一倍，并且小图刚好是在大图的正中间的下面。看到效果图后，我们先来思考下怎样可以达到这样的效果:

　　　　1、图片先是放在一个大容器里面的，且是无缝排列在一起的，这个可以使用float来实现，外面可以加一个div之类的套住。

　　　　2、hover时，图片放大，也就是说我们得调整图片的大小，即img的大小。

　　就表面看，似乎这样就够了。我们可以编写代码试试。结果你会发现，由于图片的变大，会导致周围图片的位置发生变化。这个怎么解决呢？

　　解决办法其实很简单，就是img和div之间再加一层元素可用span或者其他之类的，当hover的时候,改变img的样式，但是不去改动span。

　　不过这中间还有一个问题，就是得设置span的大小，不然就相当于span不起作用了。

　　最后附上源码，供大家参考，代码部分有注释。

 
<!doctype html>
<title>纯CSS相册 by huansky</title>
<meta charset="utf-8"/>
<meta name="keywords" content="纯CSS相册 by huansky" />
<meta name="description" content="纯CSS相册 by huansky" />
<style type="text/css">
  ul#album, #album li{
    margin:0;
    padding:0;
    list-style:none;
  }
  ul#album{/*第1层*/
    width:600px;
    height:400px;
  }
  #album li{/*第2层*/
    float:left;
    width:150px;/*一定要设置，要不当hover激活img成为大图时，img就上升到更上一层，↓*/
    height:100px;/*LI元素为空，就会被挤成一条线，后面的元素就会挤压过来填满此空间，出现最右下角少一块的现象*/
  }
  #album img{
    width:150px;/*默认平时都以小图形式显示*/
    height:100px;
  }
  #album li img:hover{/*只有由hover激活的img才位于第3层*/
    position: relative;
    left:-75px;/*上移小图的宽的一半*/
    top:-50px;/*上移小图的高的一半*/
    width:300px;
    height:200px;
  }
</style>
<h1>纯CSS相册 by huansky</h1>
<ul id="album">
  <li>
    <img  src="img/1.png" />
  </li>
  <li>
    <img  src="img/2.png" />
  </li>
  <li>
    <img  src="img/3.png" />
  </li>
  <li>
    <img  src="img/4.png" />
  </li>
  <li>
    <img  src="img/5.png" />
  </li>
  <li>
    <img  src="img/6.png" />
  </li><li>
    <img  src="img/7.png" />
  </li>
  <li>
    <img  src="img/8.png" />
  </li>
  <li>
    <img  src="img/9.png" />
  </li>
  <li>
    <img  src="img/10.png" />
  </li>
  <li>
    <img  src="img/11.png" />
  </li>
  <li>
    <img  src="img/12.png" />
  </li>
</ul>

View Code