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

PetitQ 手风琴 2018-10-28 1.45K 0 0

这是一款使用 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://gapis.geekzu.org/ajax/ajax/libs/jquery/1/jquery.min.js"></script>

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

```
<script type="text/javascript">
```
```
$(function() {
```
```
    $('#accordion > li').hover(
```
```
        function () {
```
```
            var $this = $(this);
```

            $this.stop().animate({'width':'480px'},500);

            $('.heading',$this).stop(true,true).fadeOut();

            $('.bgDescription',$this).stop(true,true).slideDown(500);

            $('.description',$this).stop(true,true).fadeIn();

```
        },
```
```
        function () {
```
```
            var $this = $(this);
```

            $this.stop().animate({'width':'115px'},1000);

            $('.heading',$this).stop(true,true).fadeIn();

            $('.description',$this).stop(true,true).fadeOut(500);

            $('.bgDescription',$this).stop(true,true).slideUp(700);

```
        }
```
```
    );
```
```
});
```
```
</script>
```

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

已有 363 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

手风琴

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

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

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

相关文章

Bootstrap垂直手风琴折叠菜单

基于Bootstrap的垂直手风琴动画特效

jQuery多级目录手风琴菜单

发表回复取消回复

热销模板

手风琴

HTML 结构：

CSS 样式：

JAVASCRIPT 代码：

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

相关文章

发表回复 取消回复

热销模板

发表回复取消回复