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

2020-01-20 23:54:34 阅读：256 来源： 互联网

标签：auto 弹性 li width 滑动 height margin 隐藏放大

<!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适用于左右滑动+点击放大的需求效果。
写出来分享给大家，希望对有需要的童鞋提供一点帮助

标签：auto,弹性,li,width,滑动,height,margin,隐藏,放大
来源： https://www.cnblogs.com/10yearsmanong/p/12219847.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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