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