hoveraccordion.js制作鼠标点击手风琴切换效果

来源:https://www.sucaihuo.com/js/776.html 2016-02-17 19:26浏览(957) 收藏

jquery手风琴滑动效果插件制作竖直滑动门切换效果,通过鼠标悬停滑过导航标签滑动门自动切换效果。可自己定义哪个滑动门展开,而且支持绑定事件,比如点击click或悬停hover。
hoveraccordion.js制作鼠标点击手风琴切换效果
分类:图片代码 > 手风琴 难易:高级
查看演示 下载资源 下载积分: 20 积分

手风琴html代码

<ul id="accoradion01" class="accoradion">
    <li><a href="#">jquery 特效</a>
        <ul>
            <li>
                <h3><a href="http://www.sucaihuo.com/js" target="_blank">jquery多窗口轮播焦点图片滚动切换</a></h3>
                <p>jquery焦点图特效制作影视网站多窗口焦点图片轮播滚动播放,点击索引按钮每个焦点图窗口图片相应的滚动切换。多个窗口图片滚动组成的轮播焦点图片切换。</p>
            </li>
        </ul>
    </li>
    <li><a href="#">js特效</a>
        <ul>
            <li>
                <h3><a href="http://www.sucaihuo.com/" target="_blank">js文字切换特效制作焦点文字带滤镜切换效果</a></h3>
                <p>js文字特效制作js文字切换效果让焦点文字带滤镜效果切换滚动,内含js代码下载。</p>
            </li>
        </ul>
    </li>
</ul>

引入并调用手风琴插件hoveraccordion.js

<script type="text/javascript" src="js/jquery.hoveraccordion.js"></script>
$('#accoradion01').hoverAccordion({
    activateItem: 5, //默认下设置第4个滑动门展开	 
    onClickOnly: false, //点击或悬停触发"false"、"true" 
    speed: 'fast'         //滑动门切换过渡效果"fast"、"slow"、"normal"
});

hoverAccordion相关API参数

参数 描述 默认值
activateItem 默认下设置第4个滑动门展开 5
onClickOnly 点击或悬停触发"false"、"true" false
speed 滑动门切换过渡效果"fast"、"slow"、"normal" fast
classActive 选中样式名称 active
classClosed 关闭样式名称 closed
classOpen 打开样式名称 opened
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2