基于 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
- });
via:http://www.cnblogs.com/lhb25/arc ... ding-accordion.html
【基于 jQuery 实现垂直滑动的手风琴效果】相关文章
2. 使用 jQuery & CSS3 实现优雅的手风琴效果
3. 使用 jQuery & CSS3 实现优雅的手风琴效果
本文来源:https://www.51html5.com/a1379.html
﹝基于 jQuery 实现垂直滑动的手风琴效果﹞相关内容
- 支持鼠标拖拽滑动的jQuery焦点图
- jQuery滑动杆打分插件 可左右滑动
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
- HTML5技术之图像处理:一个滑动的拼图游戏
- 15个实现粘性滚动的jquery插件
- 一款基于jQuery的图片左右滑动焦点图
- 一款基于jQuery的支持鼠标拖拽滑动焦点图
- 15优秀免费JQuery 图片 滑动效果
- CSS 驱动的 jQuery Masonry 插件