JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > 基于 jQuery 实现垂直滑动的手风琴效果

基于 jQuery 实现垂直滑动的手风琴效果

今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果。其主要思想是扩大手风琴片上的点击和显示更多的信息。其他内容片段将变得不那么透明。当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动。

效果演示     插件下载

HTML 示例代码:

  1. <div id="va-accordion" class="va-container">

  2.     <div class="va-nav">

  3.         <span class="va-nav-prev">Previous</span>

  4.         <span class="va-nav-next">Next</span>

  5.     </div>

  6.     <div class="va-wrapper">

  7.         <div class="va-slice va-slice-1">

  8.             <h3 class="va-title">Marketing</h3>

  9.             <div class="va-content">

  10.                 <p>Henry Watson</p>

  11.                 <ul>

  12.                     <li><a href="#">About</a></li>

  13.                     <li><a href="#">Portfolio</a></li>

  14.                     <li><a href="#">Contact</a></li>

  15.                 </ul>

  16.             </div>

  17.         </div>

  18.         <div class="va-slice va-slice-2">

  19.             ...

  20.         </div>

  21.     </div>

  22. </div>
复制代码

JavaScript 示例代码:

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

  2.     accordionW      : $(window).width(),

  3.     accordionH      : $(window).height(),

  4.     visibleSlices   : 5,

  5.     expandedHeight  : 450,

  6.     animOpacity     : 0.1,

  7.     contentAnimSpeed: 100

  8. });


  9.   
复制代码

via:http://www.cnblogs.com/lhb25/arc ... ding-accordion.html

【基于 jQuery 实现垂直滑动的手风琴效果】相关文章

1. 基于 jQuery 实现垂直滑动的手风琴效果

2. 使用 jQuery & CSS3 实现优雅的手风琴效果

3. 使用 jQuery & CSS3 实现优雅的手风琴效果

4. jQuery手风琴式相册图片展开效果

5. 分享Jquery实现网格手风琴特效

6. 分享Jquery实现网格手风琴特效

7. CSS3+ jQuery创建手风琴菜单

8. jQuery横向图片手风琴插件

9. jQuery和css3响应式带滚动条的内容手风琴插件

10. jQuery垂直缩略图相册插件 支持鼠标滑动翻页

本文来源:https://www.51html5.com/a1379.html

点击展开全部

﹝基于 jQuery 实现垂直滑动的手风琴效果﹞相关内容

「基于 jQuery 实现垂直滑动的手风琴效果」相关专题

其它栏目

也许您还喜欢