彈性佈局實現滑動內容放大，且放大部分不會被隱藏掉

時間 2019-11-08

標籤彈性佈局實現滑動內容放大部分會被隱藏简体版

原文原文鏈接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul,
            li {
                margin: 0;
                padding: 0;
            }
            div{
                width: 500px;
                height: auto;
                display: flex;
                align-items: center;
                margin-top: 20%;
                margin-left: 20%;
            }
            ul{
                display: flex;
                align-items: center;
                white-space: nowrap;
                width: auto;
                height: auto;
            }
            ul>li{
                display: inline-block;
                width: 100px;
                height: 100px;
                background: #803300;
                margin: 0 10px;
            }
            .sel{
                width: 150px;
                height: 150px;
            }
        </style>
    </head>

    <body>
        <div>
            <ul>
                <li class="sel">1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
                <li>1</li>
            </ul>
        </div>
    </body>

</html>

一個小demo，能夠看到，第一個li放大後，仍然是垂直居中，且沒有被外層滑動盒子的overflow：auto屬性給影響到的（實質上這是由於flex佈局+不限定高度來實現的）；如圖html

，另外，若是你須要全部li底部對齊，則須要給放大的那個盒子加上transfrom屬性，數值大小視狀況而定，而且還要對滑動盒子或者ul加上一個padding屬性，以便留出位移空間從而保證位移的li可以顯示徹底。
那麼這樣的樣式適用於哪一種場景呢?
其實這就是一個焦點放大特效的一個變形。固然，有不少相似特效的實現方式是在滑動盒子上加一層蒙版，或者其餘的處理方式，可是不能解決放大後內容超出部分的顯示處理，而後將焦點圖放到蒙版中，如swiper插件的第39個demo：
雙擊放大前，

雙擊放大後

一對比就知道之間的區別在哪裏了，這個小demo適用於左右滑動+點擊放大的需求效果。
寫出來分享給你們，但願對有須要的童鞋提供一點幫助佈局

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。