最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2016-01-19 20:20浏览(1480)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery支持鼠标滚动的垂直滚动手风琴
分类:图片代码 > 图片插件 难易:高级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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教程

参数 描述 默认值
accordionW 宽度 1000
accordionH 450 450
visibleSlices 可见个数 3
expandedHeight 展开高度 350
animSpeed 动画速度 250
animEasing 动画效果 jswing
animOpacity 动画透明度 0.2
contentAnimSpeed 动画消失速度 900
savePositions 保存现有状态 true
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/689.html
评论1
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 沙发
    03-21 08:27
    ngu137
    效果怎么加载不出来啊呢?
1 2