jQuery和css3精美的手风琴效果插件

这是一款效果非常不错的jQuery和css3精美的手风琴效果插件。

HTML结构

html结构使用一个无序列表做为手风琴结构。

<ul class="accordion" id="accordion">
    <li class="bg1">
        <div class="heading">Heading</div>
        <div class="bgDescription"></div>
        <div class="description">
            <h2>Heading</h2>
            <p>Some descriptive text</p>
            <a href="#">more ?</a>
        </div>
    </li>
</ul>

                

其他的手风琴项将使用class bg2, bg3 和 bg4。无序列表给定一个class和一个id用于使用javascript控制手风琴。

CSS样式

列表的css样式如下：

ul.accordion{
    list-style:none;
    position:absolute;
    right:80px;
    top:0px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
}
                

每一个列表元素都有不同的背景图片：

ul.accordion li{
    float:right;
    width:115px;
    height:480px;
    display:block;
    border-right:2px solid #fff;
    border-bottom:2px solid #fff;
    background-color:#fff;
    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;
    -webkit-box-shadow:1px 3px 15px #555;
    box-shadow:1px 3px 15px #555;
}
ul.accordion li.bg1{
    background-image:url(../images/1.jpg);
}
ul.accordion li.bg2{
    background-image:url(../images/2.jpg);
}
ul.accordion li.bg3{
    background-image:url(../images/3.jpg);
}
ul.accordion li.bg4{
    background-image:url(../images/4.jpg);
}
                

注意：阴影效果在IE上将不起作用。

开始时每个列表项的宽度为115像素，我们将使用javascript将它放大到480像素。

JAVASCRIPT

在页面中引入jQuery文件：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
                

现在，我们要在鼠标滑过手风琴菜单项时添加一个函数，使其能滑动显示，列表项的宽度为480像素。接着顶部标题消失，底部出现渐变，然后描述信息出现：

第一个函数$(‘#accordion > li’).hover当鼠标滑过菜单项元素时被触发，第二个函数则是鼠标离开时被触发。