当前位置：首页 > 网页特效 > 导航菜单

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

分类：导航菜单日期：2024-05-14 点击(2) 评论(0)

简介

##### HTML结构

------------

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样式如下：

```html
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;
}
```
每一个列表元素都有不同的背景图片：

```html
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文件：

```html
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
```
现在，我们要在鼠标滑过手风琴菜单项时添加一个函数，使其能滑动显示，列表项的宽度为480像素。接着顶部标题消失，底部出现渐变，然后描述信息出现：

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果