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手風琴圖片相冊特效插件 正式版下載地址

    遠程下載