基於jquery的手風琴圖片展示效果實現方法_jquery

本文實例講述了基於jquery的手風琴圖片展示效果實現方法。分享給大家供大家參考。具體實作方法如下：

程式碼運作效果如下圖：

index.html頁面代碼如下：

複製程式碼 程式碼如下:

一款以jquery為基礎的手風琴圖片展示效果demo div { -moz-box-sizing：邊框； 框架大小：邊框框； } html、內文、.page-container { 高度：100%； 溢位：隱藏； } .頁面容器 { -webkit-transition：填入 0.2 秒緩入； 過渡：填 0.2 秒緩入； 內邊距：80px； } .page-container.opened { 填入：0； } .page-container.opened .flex-container .country:not(.active) { 不透明度：0； -webkit-flex: 0; -ms-flex: 0; 彈性：0； } .page-container.opened .flex-container .country:not(.active) div { 不透明度：0； } .page-container.opened .flex-container .active:after { -webkit-filter: 灰階(0%) !重要; 過濾器：灰階（0%）！重要； } .flex-container { 顯示：-webkit-flex; 顯示：-ms-flexbox; 顯示：flex； 高度：100%； } @media all 與（最大寬度：900px） { .flex-container { -webkit-flex-direction: 列; -ms-flex-direction：列； 彈性方向：列； } } .國家 { 位置：相對； -webkit-flex-grow: 1; -ms-flex-正：1； 彈性成長：1； -webkit-flex: 1; -ms-flex: 1; 彈性：1； -webkit-transition：緩入緩出 0.5 秒； 過渡：0.5 秒緩入； 遊標：指針； 字體系列：「Bree Serif」，襯線； 文字對齊：置中； 顏色：#fff； 字體大小：22px; 文字陰影：0 0 3px #000; } .國家分區 { 位置：絕對； 寬度：100%； z 索引：10； 上方：50%； 文字對齊：置中； -webkit-transition: 0.1s; 過渡：0.1s； -webkit-transform: 翻譯Y(-50%); -ms-transform: 翻譯Y(-50%); 轉換：translateY(-50%); -webkit-過濾器：無； 過濾器：無； } .國家： 之後 { 內容：「」； 位置：絕對； 上方：0； 左：0； 右：0； 底部：0； 背景大小：封面； -webkit-transition：緩入緩出 0.5 秒； 過渡：0.5 秒緩入； -webkit-filter: 灰階(100%); 濾鏡：灰階（100%）； } .國家：停留 { -webkit-flex-grow: 6; -ms-flex-正：6； 彈性成長：6； } .國家：停留：之後 { -webkit-filter: 灰階(0%); 濾鏡：灰階（0%）； } @media all 與（最大寬度：900px） { .國家 { 高度：自動上； } } .netherlands:after { background-image: url("Netherlands.png"); background-position: center; } .belgium:after { background-image: url("belgium-307_3.jpg"); background-position: center; } .france:after { background-image: url("30.jpg"); background-position: center; } .germany:after { background-image: url("vacation.jpg"); background-position: center; } .england:after { background-image: url("england.jpg"); background-position: center; } Netherlands Belgium France Germany England $('.country').click(function () { $(this).toggleClass('active'); $('.page-container').toggleClass('opened'); }); //@ sourceURL=pen.js