简洁实用的jQuery手风琴插件

所属分类：导航-手风琴菜单

33422 346 查看评论 (7)

分享到微信朋友圈

查看演示立即下载

插件描述：jquery.accdion是一款非常实用的jQuery手风琴插件。它代码简单，文件体积小，并且兼容IE8浏览器。它通过简单的设置即可以得到漂亮的手风琴图片切换效果。

使用该手风琴插件需要引入jQuery，jquery.accordion.js和jquery.accordion.css文件。

<link rel="stylesheet" type="text/css" href="css/jquery.accordion.css">
<script src="lib/jquery-1.11.1.min.js"></script>
<script src="js/jquery.accordion.js"></script>

HTML结构

该手风琴特效的HTML结构非常简单：使用一个<div>作为包裹元素，在里面使用一个无序列表来制作手风琴项。

<div class="accordion">
    <ul>
        <li class="item1 active"><a href=""></a></li>
        <li class="item2"><a href=""></a></li>
        <li class="item3"><a href=""></a></li>
        <li class="item4"><a href=""></a></li>
        <li class="item5"><a href=""></a></li>
    </ul>
</div>

CSS3圆形图片鼠标经过旋转效果

html5手机触屏左右滑动图动画切换效果