本网站只能被运行在支持JavaScript脚本的环境中

使用CSS 3制作伸缩式图像面板

本文介绍如何通过CSS 3创建一些伸缩式图像面板。这些面板平时处于收缩状态,当用户鼠标点击某个面板时,该面板变为展开状态。通过CSS中的相邻兄弟选择器并且在HTML代码中使用一个嵌套结构,我们可以通过radio元素(<input type="radio">)来控制面板的伸缩状态。

实际运行结果

image01
图片标题一
image02
图片标题二
image03
图片标题三
image04
图片标题四
image05
图片标题五
image06
图片标题六
image07
图片标题七
image08
图片标题八

页面HTML代码

制作本例中伸缩式图像面板的关键点在于创建一个层层嵌套的结构,当展开一个图像面板时可以移动它内部所有的图像面板。在HTML代码中,每一个图像面板都是一个figure元素,在每个figure元素内部包含了用于放置图片的img元素、一个用于控制面板伸缩状态的radio元素与一个用于显示图像标题的figcaption元素。

<div class="ia-container">
    <figure>
        <img src="images/1.jpg" alt="image01" />
        <input type="radio" name="radio-set" checked="checked" />
        <figcaption><span>图像标题一</span></figcaption>         
        <figure>
            <img src="images/2.jpg" alt="image02" />
            <input type="radio" name="radio-set" />
            <figcaption><span>图像标题二</span></figcaption>             
            <figure>
                <!-- ... -->                 
                <figure>
                    <!-- ... -->                     
                    <figure>
                        <!-- ... -->                         
                        <figure>
                            <!-- ... -->                 
                            <figure>
                                <!-- ... -->
                                <figure>
                                    <!-- ... -->
                                </figure>                                 
                            </figure>                 
                        </figure>                             
                    </figure>                         
                </figure>                     
            </figure>             
        </figure>         
    </figure>     
</div>

你当然也可以在每个figure元素中放入其他元素,关键在于为这些figure元素使用阶层嵌套结构,以及一个radio元素。

CSS 3样式代码

首先,我们给最外层的容器元素指定一个总宽度,并且通过将overflow属性值设定为hidden来隐藏超出部分。为了代码简短起见,本文中的代码均不使用浏览器供应商前缀。

.ia-container {
    width:915px;
    margin: 20px auto;
    overflow: hidden;
    box-shadow: 1px 1px 4px rgba(0,0,0,0.08);
    border: 7px solid rgba(255,255,255,0.6);
}

我们将每个figure元素的left样式属性值都设置为50,以便当其处于收缩状态时拥有一个50像素宽的可见部分。我们将每个figure元素的宽度设置为335像素(等于图片宽度)。我们为图像展开时使用一个transition动画。

.ia-container figure {
    position: absolute;
    top: 0;
    left: 50px; /* 图像面板处于收缩状态时的可见部分宽度 */
    width: 335px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
    transition: all 0.3s ease-in-out;
}

第一个figure元素应该被放置在主容器内部的最左边。

.ia-container > figure {
    position: relative;
    left: 0 !important;
}

我们将img元素的宽度设定为100%,使其能够充满figure元素内部。

.ia-container img {
    display: block;
    width: 100%;
}

每个radio元素应该覆盖住图像面板处于收缩状态时的可见部分。我们将其opacity样式属性值设置为0,使其不可见,但是仍能被点击。它的z-index属性值应该被设置的高一些,使其能够被点击。

.ia-container input {
    position: absolute;
    top: 0;
    left: 0;
    width: 50px; /* just cover visible part */
    height: 100%;
    cursor: pointer;
    border: 0;
    padding: 0;
    opacity: 0;
    z-index: 100;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

当radio元素被点击时,我们需要将其隐藏起来。我们通过将其宽度变为0px来实现这一处理。我们也需要指定一个transition动画来让其兄弟figure元素向左滑动。

.ia-container input:checked{
    width: 0px;
    left: auto;
    right: 0px;
}
.ia-container input:checked ~ figure {
    left: 235px;
    transition: all 0.7s ease-in-out;
}

figcaption元素应该涵盖整个figure元素,同时我们为figcaption元素指定一个透明浅灰色遮罩。另外,我们为其内部的span元素指定一个透明的浅灰色背景,其垂直位置应该位于figcaption元素的中央。

.ia-container figcaption {
    width: 100%;
    height: 100%;
    background: rgba(87, 73, 81, 0.1);
    position: absolute;
    top: 0px;
    transition: all 0.2s linear;
}
 
.ia-container figcaption span {
    position: absolute;
    top: 40%;
    margin-top: -30px;
    right: 20px;
    left: 0px;
    overflow: hidden;
    text-align: center;
    background: rgba(87, 73, 81, 0.3);
    line-height: 20px;
    font-size: 18px;
    opacity: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-weight: 700;
    padding: 20px;
    color: #fff;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
} 

当一个图像面板处于选取状态时,我们通过将透明度设为0来移除figcaption元素的透明浅灰色遮罩。

.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{
    background: rgba(87, 73, 81, 0);
}

当某个图像面板处于展开状态时用于显示图像标题的span元素应该从顶部淡入进来。

.ia-container input:checked + figcaption span {
    transition: all 0.4s ease-in-out 0.5s;
    opacity: 1;
    top: 50%;
}

我们想在鼠标指针停留在处于收缩状态的图像面板的可见部分(figcaption元素)上时改变其透明度。但是由于radio元素覆盖住了面板内的其他所有元素,所以我们需要使用一个相邻兄弟选择器(这需要figcaption被书写在紧跟着radio元素之后):

.ia-container input:hover + figcaption {
    background: rgba(87, 73, 81, 0.03);
}