纯css打造交互图片广告栏

分享一个试用纯css打造网页图片切换、tab页切换效果，使用stylus技术。...



最近几天在某大型网站上看到一个图片切换效果：

当用户鼠标移动到下面的小图片上的时候可以看到上面的大图发生变化，这个效果做的却是不错给人一种耳目一新的赶脚，今天我们不妨来看看如果仅仅使用css3而不使用js如何实现这种效果。

首先，准备工具：电脑一台，手指10根（少几根没关系，能打字就行），开发软件一款（sublime，webstorm，DW，aptana...根据心情以及自己的爱好选择即可），爱心一枚（其实这个在本例中有什么用木偶也不知道）。

首先分析，如下图：

根据上图我们可以确定以下页面结构点：

1，页面可见元素为：背景大图、小图列表、多张小图片；

2，背景大图与小图列表是兄弟节点，所以他们需要一个共同的父级节点；

技术分析：

我们的目标是指利用css来实现动画交互，在css中能够监听用户鼠标事件的只有一个hover伪类，所以我们就要在hover伪类上下下功夫。

因为是纯css所以我们无法通过hover更改背景大图的src属性，只能通过隐藏、显示的方式来实现用户视觉上的图片更替(hover事件发生在小图片元素上，这一点很重要)

所以我们可以得出以下结构体代码：

各位留意，在每个li元素中包涵两个图片元素，第一个class属性为small-img，第二个为big-img，small-img负责展示缩略过的小图片，big-img负责当鼠标掠过小图时候要展示出来的大图。其实说白了这个案例的核心知识点只有两个：

1，css伪类hover的应用；

2，css绝对、相对定位技术。

在相对相对定位和绝对定位的关系中，我们知道子元素（absolute定位）会根据父元素（relative定位）的位置而定为，那么这个“父元素”到底是一个怎么样的父元素呢？这里的父元素要求：必须为absolute定为的直系父级（父亲、祖父、曾祖父、曾曾祖父）都可以。回过头来看我们的html结构，其中big-img元素为absolute定为，如果我们需要它在指定的位置显示，就必须为它寻找一个特定的relative元素，根据设计原稿所示，big-img必须展示在最上面，所以在我们的结构中惟一符合该需求的只有class属性为container的元素，所以结合以上说明，我们的css代码为：



（以上代码为stylus语法格式，后期会逐步分享stylus语法书写方式）

本期分享到此为止，期待下次见面，以上！

    关注 前端木偶