Css相册 CSS浮动(float,clear)通俗讲解:http://www.cnblogs.com/huansky/p/5460803.html

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

  

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

第一种css相册:

  我们先来看看示意图:

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

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

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

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

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

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

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

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

第二种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里面的图片就好了。

  最后附上源码供大家参考:

 relative
   overflow hidden
  #album li img
  #album li:hover span img
    display block absolute 150px 300px 200px
  #album li.left 
    clear
  #album li.right right
  #album li.fixbug 
  #album .first img>
        />
        span class="first"img /></spanli ="left"="right"img   >
View Code

 

相关文章

Css常用的排序方式权重分配 排序方式: 1、按类型&#160;...
原文:https://www.cnblogs.com/wenruo/p/9732704.html 先上...
css属性:word-wrap:break-word; 与 word-break:break-all 的...
https://destiny001.gitee.io/color/
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML...
css之background的cover和contain的缩放背景图 对于这两个属...