弹性布局实现滑动内容放大,且放大部分不会被隐藏掉
<!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适用于左右滑动+点击放大的需求效果。
写出来分享给大家,希望对有需要的童鞋提供一点帮助
【推荐】AI 的力量,开发者的翅膀:欢迎使用 AI 原生开发工具 TRAE
【推荐】2025 HarmonyOS 鸿蒙创新赛正式启动,百万大奖等你挑战
【推荐】博客园的心动:当一群程序员决定开源共建一个真诚相亲平台
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C#性能优化:为何 x * Math.Sqrt(x) 远胜 Math.Pow(x, 1.5)
· 本可避免的P1事故:Nginx变更导致网关请求均响应400
· 还在手写JSON调教大模型?.NET 9有新玩法
· 复杂业务系统线上问题排查过程
· 通过抓包,深入揭秘MCP协议底层通信
· AI 的力量,开发者的翅膀:欢迎使用字节旗下的 AI 原生开发工具 TRAE
· 「闲聊文」准大三的我,思前想后还是不搞java了
· C#性能优化:为何 x * Math.Sqrt(x) 远胜 Math.Pow(x, 1.5)
· 千万级的大表如何新增字段?
· 《HelloGitHub》第 112 期