随笔- 180 文章- 14 评论- 2 阅读- 13万

弹性布局实现滑动内容放大，且放大部分不会被隐藏掉

<!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布局+不限定高度来实现的）；如图

，另外，如果你需要所有li底部对齐，则需要给放大的那个盒子加上transfrom属性，数值大小视情况而定，并且还要对滑动盒子或者ul加上一个padding属性，以便留出位移空间从而保证位移的li能够显示完全。
那么这样的样式适用于哪种场景呢?
其实这就是一个焦点放大特效的一个变形。当然，有很多类似特效的实现方式是在滑动盒子上加一层蒙版，或者其他的处理方式，但是不能解决放大后内容超出部分的显示处理，然后将焦点图放到蒙版中，如swiper插件的第39个demo：
双击放大前，

双击放大后

一对比就知道之间的区别在哪里了，这个小demo适用于左右滑动+点击放大的需求效果。
写出来分享给大家，希望对有需要的童鞋提供一点帮助