jquery手風(fēng)琴效果插件下載 最新更新|軟件分類|軟件專題|手機(jī)版|論壇轉(zhuǎn)貼|軟件發(fā)布

您當(dāng)前所在位置： 首頁 → 編程開發(fā) → 編程輔助 → jQuery手風(fēng)琴圖片相冊特效插件 正式版

jQuery手風(fēng)琴圖片相冊特效插件

正式版

jQuery手風(fēng)琴圖片相冊特效插件下載
  • 軟件大?。?span itemprop="fileSize">427.00 KB
  • 軟件語言：中文
  • 軟件類型：國產(chǎn)軟件 / 編程輔助
  • 軟件授權(quán)： 免費(fèi)軟件
  • 更新時(shí)間：2017-04-11 12:37:57
  • 軟件等級(jí)：4星
  • 軟件廠商： -
  • 應(yīng)用平臺(tái)：WinAll, WinXP
  • 軟件官網(wǎng)：

ITMOP本地下載文件大小：427.00 KB

點(diǎn)贊 好評(píng) 0%（0） 差評(píng) 差評(píng) 0%（0）

軟件介紹人氣軟件精品推薦相關(guān)文章網(wǎng)友評(píng)論下載地址

小編為您推薦： jquery手風(fēng)琴效果插件 jquery插件 jquery

jquery手風(fēng)琴效果插件是一款能夠?qū)⒔缑骘@示成手風(fēng)琴樣式的jquery插件，安裝之后就可以使用啦，大氣美觀，有需要的就來IT貓撲下載吧！

jQuery手風(fēng)琴圖片相冊特效插件介紹

jQuery手風(fēng)琴圖片相冊特效插件，這是一款使用純javascript來制作的帶彈性動(dòng)畫的手風(fēng)琴圖片相冊特效。

該手風(fēng)琴圖片相冊在鼠標(biāo)滑過時(shí)，相應(yīng)的圖片會(huì)水平展開，而圖片的說明文字則會(huì)垂直滑動(dòng)上來，形成一些視覺差的感覺。

使用方法

在頁面中引入樣式文件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":"一級(jí)目錄","img":"images/cog.png","submenu":[{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"}]},{"title":"一級(jí)目錄","img":"images/cog.png","submenu":[{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"title":"二級(jí)目錄","img":"images/monitor_window_3d.png"},{"id":"4","title":"二級(jí)目錄","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調(diào)用方式

    代碼如下:

    無標(biāo)題文檔

    更多>> 軟件截圖

    推薦應(yīng)用

    其他版本下載

    精品推薦 jquery特效插件 jQuery插件

    jquery特效插件
    更多 (7個(gè)) >> jquery特效插件 jquery插件有哪些？jquery插件有什么用？IT貓撲網(wǎng)小編為大家準(zhǔn)備了jquery特效插件合集，內(nèi)含有jQuery萬花筒動(dòng)畫插件、jQuery鼠標(biāo)滑過特效插件、jQuery折疊特效插件、QuikQuak音頻特效插件、jquery輪播圖動(dòng)畫特效插件等jquery特效插件下載，
    jQuery插件
    更多 (31個(gè)) >> jQuery插件 jquery插件大全是IT貓撲小編為大家整理的jquery插件合集，包含了多種jquery特效插件下載，其中大家常用的jquery分頁插件、jquery縮略圖插件、jquery幻燈片插件、jquery萬年歷插件、jquery側(cè)邊欄插件等等都有，后面小編也介紹了相關(guān)使用方法，想了解

    相關(guān)文章

    下載地址

    • jQuery手風(fēng)琴圖片相冊特效插件 正式版

    查看所有評(píng)論>> 網(wǎng)友評(píng)論

    發(fā)表評(píng)論

    (您的評(píng)論需要經(jīng)過審核才能顯示) 網(wǎng)友粉絲QQ群號(hào):374962675

    查看所有 0條 評(píng)論>>

    更多>> 猜你喜歡