jQuery手风琴效果插件是一款能够将界面显示成手风琴样式的jQuery插件，安装之后就可以使用啦，大气美观，有需要的就来IT猫扑下载吧！

jQuery手风琴图片相册特效插件介绍

jQuery手风琴图片相册特效插件，这是一款使用纯javascript来制作的带弹性动画的手风琴图片相册特效。

该手风琴图片相册在鼠标滑过时，相应的图片会水平展开，而图片的说明文字则会垂直滑动上来，形成一些视觉差的感觉。

使用方法

在页面中引入样式文件main.css和jquery、jquery.easing.min.js文件，以及轮播图js文件main.js。

css样式

代码如下:

/* CSS Document */

body {

    margin: 0 auto;

    padding: 0 auto;

    font-size: 9pt;

    font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif;

}

.accordion {

    padding-left: 0px;

}

.accordion li {

    border-top: 1px solid #000;

    list-style-type: none;

}

.titlemenu {

    width: 100%;

    height: 30px;

    background-color: #F2F2F2;

    padding: 5px 0px;

    text-align: left;

    cursor: pointer;

}

.titlemenu img {

    position: relative;

    left: 20px;

    top: 5px;

}

.titlemenu span {

    display: inline-block;

    position: relative;

    left: 40px;

}

.submenu {

    text-align: left;

    width: 100%;

    padding-left: 0px;

}

.submenu li {

    list-style-type: none;

    width: 100%;

}

.submenu li img {

    position: relative;

    left: 20px;

    top: 5px;

}

.submenu li a {

    position: relative;

    left: 40px;

    top: 5px;

    text-decoration: none;

}

.submenu li span {

    display: inline-block;

    height: 30px;

    padding: 5px 0px;

}

.hover {

    background-color: #4A5B79;

}

自定义js

代码如下:

(function ($) {

    piano = function () {

        _menu ='[{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"}]},{"title":"一级目录","img":"images/cog.png","submenu":[{"title":"二级目录","img":"images/monitor_window_3d.png"},{"title":"二级目录","img":"images/monitor_window_3d.png"},{"id":"4","title":"二级目录","img":"images/monitor_window_3d.png"}]}]';

        return ep = {

            init: function (obj) {

                _menu = eval('(' + _menu + ')');

                 var li ="";

                $.each(_menu, function (index, element) {

                    li += '

  • ' + element.title + '';

                        if(element.submenu!=null)

                        {

                            li+='

      ';

                              $.each(element.submenu, function (ind, ele) {

                                  li += '

    • ' + ele.title + '
      • ';

                              });

                              li+='

    ';

                        }

                        li+='

    • ';

                    });

                    obj.append(li);

                }

            }

        }

        $.fn.accordion = function (options) {

            var pia = new piano();

            pia.init($(this));

            return this.each(function () {

                var accs = $(this).children('li');

                 accs.each(reset);

                accs.click(onClick);

                var menu_li = $(".submenu").children("li");

                menu_li.each(function (index, element) {

                    $(this).mousemove(function (e) {

                        $(this).siblings().removeClass("hover");

                        $(this).find("a").css("color", "#fff");

                        $(this).siblings().find("a").css("color", "#000");

                        $(this).addClass("hover");

                    });

                });

            });

        }

        function onClick() {

            $(this).siblings('li').find("ul").each(hide);

            $(this).find("ul").slideDown('normal');

            return false;

        }

        function hide() {

            $(this).slideUp('normal');

        }

        function reset() {

            $(this).find("ul").hide();

        }

    })(jQuery);

    html调用方式

    代码如下:

    无标题文档

    jQuery手风琴图片相册特效插件 正式版下载地址

    远程下载