基于 jQuery 实现垂直滑动的手风琴效果-阿里云开发者社区

开发者社区> 秋天风景> 正文

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

简介:   今天我们要与大家分享一个漂亮而灵活的垂直 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
});

  

您可能感兴趣的相关文章

 

本文链接:学习基于 jQuery 实现垂直滑动的手风琴效果

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

作者:山边小溪
主站:yyyweb.com 记住啦:)
欢迎任何形式的转载,但请务必注明出处。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jquery动画 -- 4.升级版遮罩效果的图片走廊--带自动运行效果
  我将上一章中了插件做了个小小的升级,实现了自动运行效果,完整代码大家见demo。    主要的变化点有:把‘下一条’、‘上一条’的click事件抽象到一个函数showNext中。添加setInterval,添加selector元素的hover事件。
909 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
4519 0
jQuery Flat Shadow – 轻松实现漂亮的长阴影效果
  长阴影其实就是扩展了对象的投影,感觉是一种光线照射下的影子,通常采用角度为 45 度的投影,给对象添加了一份立体感。长阴影快速发展为流行的设计趋势,并经常被应用到扁平设计方案的对象。更详细的介绍可以阅读《扁平化设计的最新趋势 – 长阴影》一文,相信看了之后你会长阴影设计有更深的了解。
618 0
使用 Sticky-Kit 实现基于 jQuery 的元素固定效果
  元素固定效果在网页中应用得很多,比较常见的使用场景有改进导航,显示广告。Sticky-Kit 是一个非常方便的 jQuery 插件,简化了创建/管理粘元素,有复杂的使用功能。这些功能包括:处理多个固定元素,启用/禁用的行为取决于对元素在视口中的位置和回调。
753 0
10 个非常酷的基于jQuery的菜单效果插件
除了直观的界面效果外,炫酷的网站导航菜单或右键菜单也能为访问者带来眼前一亮的感觉。本文为你带来10个非常酷的基于jQuery的菜单效果插件。 1.  右击菜单 一个创建右击菜单的插件,简洁且易用。  源码/演示 2.  jQuery多级菜单——FX CSS菜单与子菜单 使用CSS创建菜单,使用JavaScript展示效果。
526 0
jQuery EasyUI API 中文文档 - 手风琴(Accordion)
Accordion 手风琴 用 $.fn.accordion.defaults 重写了 defaults。 依赖 panel 用法示例 创建 Accordion 经由标记创建 accordion, 添加 'easyui-accordion' 类到 标记。
824 0
+关注
秋天风景
既然选择了远方,便只顾风雨兼程。
1516
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载