jQuery支持鼠标滚动的垂直滚动手风琴

收藏

vaccordion.js是一款支持鼠标移动的垂直滚动手风琴插件，本文演示了它5种不同的手风琴菜单效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示 下载资源： 108 次

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

手风琴图片列表和上一张、下一张按钮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="http://www.erdangjiade.com/js/522.html" target="_blank">jquery文字上下滚动</a> </li> 
                    <li><a href="http://www.erdangjiade.com/js/523.html" target="_blank">jQuery省市区三级联动</a> </li> 
                    <li><a href="http://www.erdangjiade.com/js/524.html" target="_blank">Thinkphp各大支付平台在线支付</a> </li> 
                </ul> 
            </div> 
        </div> 
        <div class="va-slice va-slice-2"> 
            <h3 class="va-title">Management</h3> 
            <div class="va-content"> 
                <p>Keith Johnson</p> 
                <ul>
                    <li><a href="http://www.erdangjiade.com/js/117.html" target="_blank">jQuery+PHP数字统计动态展示效果</a> </li> 
                    <li><a href="http://www.erdangjiade.com/js/118.html" target="_blank">PHP+jQuery翻牌抽奖</a> </li> 
                    <li><a href="http://www.erdangjiade.com/js/119.html" target="_blank">datetimepicker日期时间插件</a> </li> 
                </ul> 
            </div> 
        </div> 
    </div> 
</div>

引入easing动画插件、mousewheel鼠标滚动插件和手风琴插件vaccordion.js

<script type="text/javascript" src="js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" src="js/jquery.mousewheel.js"></script> 
<script type="text/javascript" src="js/jquery.vaccordion.js"></script>

演示一：默认效果

$('#va-accordion').vaccordion();

演示二：动画效果

$('#va-accordion').vaccordion({
    expandedHeight: 450,
    animSpeed: 500,
    animEasing: 'easeInOutBack',
    animOpacity: 0.4
});

vaccordion.js插件API教程