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

jQuery垂直手风琴插件

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

jQuery垂直手风琴插件

简介

##### HTML
```html
<div id="va-accordion" class="va-container">
  <div class="va-nav">
    <span class="va-nav-prev">Previous</span>
    <span class="va-nav-next">Next</span>
  </div>
  <div class="va-wrapper">
    <div class="va-slice va-slice-1">
      <h3 class="va-title">Marketing</h3>
      <div class="va-content">
        <p>Henry Watson</p>
        <ul>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="va-slice va-slice-2">
      ...
    </div>
  </div>
</div>
```
我们为每个slice定义不同的class。最后一个全屏手风琴的例子我们使用不同的颜色来填充slice的背景色。

下面是两个slice的调用方法：

```html
$('#va-accordion').vaccordion({
  expandedHeight  : 350,
  animSpeed   : 400,
  animOpacity   : 0.7,
  visibleSlices : 2
});
```
##### 可用参数
插件的参数选项允许我们调整插件的宽度和高度，有多少slice可见，每个slice伸展的高度等等：

```html
// the accordion's width
accordionW    : 1000,
// the accordion's height
accordionH    : 450,
// number of visible slices
visibleSlices : 3,
// the height of a opened slice
// should not be more than accordionH
expandedHeight  : 350,
// speed when opening / closing a slice
animSpeed   : 250,
// easing when opening / closing a slice
animEasing    : 'jswing',
// opacity value for the collapsed slices
animOpacity   : 0.2,
// time to fade in the slice's content
contentAnimSpeed: 900,
// if this is set to false,
// we collapse any opened slice
// before sliding
savePositions : true
```
如果你想让slice完全显示，可以设置expandedHeight和accordionH高度相同。在最后一个例子中的全屏效果也使用了相同的设置原理。

```html
$('#va-accordion').vaccordion({
  accordionW    : $(window).width(),
  accordionH    : $(window).height(),
  visibleSlices : 5,
  expandedHeight  : 450,
  animOpacity   : 0.1,
  contentAnimSpeed: 100
});
```

web299.com

jQuery垂直手风琴插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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