本文實例講述了基於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>
