请选择 进入手机版 | 继续访问电脑版
记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航
查看: 4730|回复: 0
收起左侧

[HTML5应用] 基于 jQuery 实现垂直滑动的手风琴效果[含1P]

[复制链接]
发表于 2017-6-8 07:23:24 | 显示全部楼层 |阅读模式
  今天我们要与大家分享一个漂亮而灵活的垂直 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



  • });





  •   

复制代码



上一篇:精选HTML5/CSS3动画应用源码分享
下一篇:2D扫雷
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表