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

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

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>

JavaScript 示例代码：

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

您可能感兴趣的相关文章