码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-01-21 00:49:03      阅读:99      评论:0      收藏:0      [点我收藏+]

标签:width   样式   article   item   没有   com   from   实现   pre   

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

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

标签:width   样式   article   item   没有   com   from   实现   pre   

原文地址:https://www.cnblogs.com/10yearsmanong/p/12219847.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!