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

　　

　　当你点击下面的数字的时候，就会换一张图片，直接用链接就可以实现，很简单。下面我们将介绍其他两种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>

第二种css相册：

　　同样，我们还是来看看我们最后要达到的效果：如下图

　　当鼠标在外围的图片上移动的时候，会在中间显示其大图，同样我们来思考下应该怎样达到这种效果。

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

　　　　2、不同于第一种，第二种中间是空的，图片不能放在中间，这个似乎有点难实现，后面再说。

　　　　3、当鼠标hover的时候，它不仅得显示在中间，还得在原来的地方也显示，这就告诉着我们需要两份图片，其中一份hover的时候显示在中间。

　　　　4、所有的图片都是显示在中间，因此用绝对定位就可以了。

　　好了，可以开始写了。然后你会发现图片的位置似乎有点难实现，因为，图片会自己跑到中间空的地方去。怎么办呢？别急，clear还有两个属性，right和left，有不明白的可以参看我的一篇博文：CSS浮动(float,clear)通俗讲解：http://www.cnblogs.com/huansky/p/5460803.html。

　　位置问题解决后，有些人可能还有问题，那就是我hover的时候，怎么保证一张图片变大，另一张不变呢？这个其实很简单，给把另一个img放在span里面，hover的时候，只改变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{

    width:600px;

    height:400px;

    position:relative;

  }

  #album li{

    float:left;

    width:150px;

    height:100px;

   overflow: hidden;

  }

  #album li img{

    width:150px;

    height:100px;

  }

  #album li:hover span img{

    display: block;

    position: absolute;

    top:100px;

    left: 150px;

    width: 300px;

    height: 200px;

  }

  #album li.left {

    float:left;

    clear:left;

  }

  #album li.right {

    float:right;

    clear:right;

  }

  #album li.fixbug {

    width:200px;

    height:150px;

  }

  #album .first img{

    display: block;

    position: absolute;

    top:100px;

    left: 150px;

    width: 300px;

    height: 200px;

  }

</style>

<h1>纯CSS相册 by huansky</h1>

<ul id="album">

    <li>

        <img  src="img/1.png" />

        <span class="first"><img src="img/1.png" /></span>

    </li>

    <li>

        <img src="img/2.png" />

        <span><img src="img/2.png" /></span>

    </li>

    <li>

        <img src="img/3.png" />

        <span><img src="img/3.png" /></span>

    </li>

    <li>

        <img src="img/4.png" />

        <span><img src="img/4.png" /></span>

    </li>

    <li class="left">

        <img src="img/5.png" />

        <span><img src="img/5.png" /></span>

    </li>

    <li class="right">

        <img  src="img/6.png" />

        <span><img src="img/6.png" /></span>

    </li>

    <li class="left">

        <img   src="img/7.png" />

        <span><img src="img/7.png" /></span>

    </li>

    <li class="right">

        <img  src="img/8.png" />

        <span><img src="img/8.png" /></span>

    </li>

    <li class="left">

        <img   src="img/9.png" />

        <span><img src="img/9.png" /></span>

    </li>

    <li>

        <img src="img/10.png" />

        <span><img src="img/10.png" /></span>

    </li>

    <li>

        <img src="img/11.png" />

        <span><img src="img/11.png" /></span>

    </li>

    <li>

        <img src="img/12.png" />

        <span><img src="img/12.png" /></span>

    </li>

</ul>

Css相册的更多相关文章

  1. CSS读书笔记（2）---简易相册和日历表的制作

    一.HTML和CSS制作的简易相册 相册在默认情况下是缩略图显示,而且是截取相片的某一部分显示的.当鼠标停留在某张缩略图上,相册列表中的缩略图变为大图,展示在相册的左边区域, 同时缩略图部分变成空的 ...

  2. Html 制作相册

    本文主要讲述采用Html5+jQuery+CSS 制作相册的小小记录. 主要功能点: Html5进行布局 调用jQuery(借用官网的一句话:The Write Less, Do More)极大的简化 ...

  3. [css]【转载张鑫旭】我是如何对网站CSS进行架构的

    一.写在前面的 都是自己积累形成的一些东西,可能带有明显的个人印记.不是专业内容,不是权威指南,只是展示一点自己的观点,借此希望能与各位优秀的同行交流看法,见解.以得到进步与提高. 二.我所知的一些过 ...

  4. 我是如何对网站CSS进行架构的

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=944 一.写在前面的 ...

  5. a:hover应用精粹

    原本想把题目叫做“纯CSS相册2”的,但在实现过程中试验了许多东西,干脆全部写出来分享了.大家知道,能兼容IE6的具有动态切换能力的CSS属性也只有hover伪类了,但hover伪类在IE仅对链接生效 ...

  6. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  7. 轻量的、可自定义 CSS 的 Lightbox 相册插件

    jQuery LightGallery是一个轻量级的,可定制的,模块化的,响应式的 jQuery 相册插件.它采用 CSS 来实现图像和视频的大小调整.因此,这将是非常灵活的,并且比使用 JavaSc ...

  8. HTML5 CSS3专题 纯CSS打造相册效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时 ...

  9. 使用html+css+js实现3D相册

    使用html+css+js实现3D相册,快来上传的照片吧 效果图: 代码如下,复制即可用: <!DOCTYPE html> <html lang="en"> ...

随机推荐

  1. CSS 基础 例子 盒子模型及外边距塌陷

    我们通常设置的宽度和高度,是指盒子模型中内容(content)的宽度和高度.元素的高度,还要加上上下padding和上下border,元素整个盒子的高度还要加上上下margin:宽度类似计算. 注意: ...

  2. less（css）语言快速入门

    转载 原文地址:https://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/ 简介 CSS(层叠样式表)是一门历史悠久的标记性语言,同 ...

  3. linux 三剑客之awk

    #AWK命令 基础显示 打印install.log文件中包含data字段行的第二区域 awk '/data/ {print $2}' install.log 查看num10.txt的第一行 head ...

  4. php开发工具，zendstudio13使用方法补丁

    官网原版下载http://downloads.zend.com/studio ... win32.win32.x86.exe 破解补丁:链接:http://pan.baidu.com/s/1gdi4U ...

  5. 分形之谢尔宾斯基(Sierpinski)地毯

    前面讲了谢尔宾斯基三角形,和这一节的将把三角形变为正方形,即谢尔宾斯基地毯,它是由瓦茨瓦夫·谢尔宾斯基于1916年提出的一种分形,是自相似集的一种. 谢尔宾斯基地毯的构造与谢尔宾斯基三角形相似,区别仅 ...

  6. springmvc配置文件web.xml详解各方总结。

    Spring分为多个文件进行分别的配置,其中在servlet-name中如果没有指定init-param属性,那么系统自动寻找的spring配置文件为[servlet-name]-servlet.xm ...

  7. 实验4 IIC通讯与EEPROM接口

    1.       用C语言编程,利用定时器产生一个0~99秒变化的秒表,并且显示在数码管上,每过一秒将这个变化写入实验板上AT24C02,当关闭实验板电源,并再次打开实验板电源时,单片机从AT24C0 ...

  8. 【Win】Clso QR Tool 二维码小工具

    一个可以生成并识别二维码的windows小工具,纯绿色.不含糖. 可以通过输入文本生成二维码,或者加载本地图片.剪贴板内的图片,直接解析出二维码内容. 支持自定义LOGO. 下载文件 (当前版本:1. ...

  9. 【转载】uwp 获取系统字体库

    效果图: 要获取到字体库首先要在 NuGet 添加 SharpDx.Direct2D1  api: /// <summary> /// 获取系统字体库列表 /// </summary ...

  10. re模块 模块

    import re findall()  烦的奥 import re # 1. findall 查找所有结果,数据不是特别庞大 lst = re.findall('a','abcsdfasdfa') ...