风琴html插件,jQuery垂直手风琴插件

这款jQuery手风琴插件中使用了一个jQuery鼠标滚轮插件jQuery Mousewheel Plugin，这个插件使我们可以用鼠标滚动来浏览手风琴效果。

插件中精美的插图来自于花瓣。

HTML

Previous

Next

Marketing

Henry Watson

• About
• Portfolio
• Contact

...

我们为每个slice定义不同的class。最后一个全屏手风琴的例子我们使用不同的颜色来填充slice的背景色。

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

$('#va-accordion').vaccordion({

expandedHeight : 350,

animSpeed : 400,

animOpacity : 0.7,

visibleSlices : 2

});

可用参数

插件的参数选项允许我们调整插件的宽度和高度，有多少slice可见，每个slice伸展的高度等等：

// 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高度相同。在最后一个例子中的全屏效果也使用了相同的设置原理。

$('#va-accordion').vaccordion({

accordionW : $(window).width(),

accordionH : $(window).height(),

visibleSlices : 5,

expandedHeight : 450,

animOpacity : 0.1,

contentAnimSpeed: 100

});