js逐步实现原生flex系统
时间:2022-07-28
本文章向大家介绍js逐步实现原生flex系统,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
html部分:
<div class="panels">
<div class="panel panel1">
<p>Hey</p>
<p>Let's</p>
<p>Dance</p>
</div>
<div class="panel panel2">
<p>Give</p>
<p>Take</p>
<p>Receive</p>
</div>
<div class="panel panel3">
<p>Experience</p>
<p>It</p>
<p>Today</p>
</div>
<div class="panel panel4">
<p>Give</p>
<p>All</p>
<p>You can</p>
</div>
<div class="panel panel5">
<p>Life</p>
<p>In</p>
<p>Motion</p>
</div>
</div>
效果:
注意点:panel1~5的意思是五张图片.
css:
*{padding: 0px;margin: 0px;}
.panels
{
display: flex;
}
.panel
{
min-height: 100vh;
overflow: hidden;
color: white;
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
line-height: 33.3vh;
justify-content: center;
background-position: center;
transition:
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
background 0.2s;
}
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
.panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }
.panel>p
{
/*border: 2px solid red;*/
flex: 1;/*每一个p占据三分之一的panel的空间.不然的话,你删除flex:1就知道了*/
}
.panel>p:first-child
{
transform: translateY(-100%);
}
.panel.open-active>p:first-child
{
transform: translateY(0);
}
.panel>p:last-child
{
transform: translateY(100%);
}
.panel.open-active>p:last-child
{
transform: translateY(0);
}
.panel p
{
text-transform: uppercase;
font-size: 2em;
}
.panel p:nth-child(2)
{
font-size: 4em;
}
.panel.open {
flex: 5;
font-size:40px;
}
效果:
css逻辑: 第一:先panels弹性布局,使得panels里面的panel水平排列,panel也flex布局,使得里面的p垂直排列,这里面的flex: 1;代表分别代表所有的panel完美适应body,和所有的p完美适应panel.
第二:点击了是panel里面的第一个p与最后一个p回归原位,点击之前是消失的.
第三:flex:5我的理解是比原来扩大5倍.
js部分:
const panels = document.querySelectorAll('.panel');
function toggleOpen() {
this.classList.toggle("open");
}
function toggleActive(e)
{
if(e.propertyName.includes("flex"))
{
this.classList.toggle("open-active");
}
}
panels.forEach(panel=>panel.addEventListener('click',toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));
js实现逻辑: 第一:先获取所有的panel 第二:当点击某一个panel的时候,就执行
文字(40px)与宽度扩大(5倍).
第三:是当第二步结束之后(动画结束之后),第一个p与最后一个p回来。(注意一下,) 注意一下;toggle是执行完里面的东西之后比如class之后就会回归本来的面貌.
- 摩拜共享汽车亮相 首批新能源电动汽车试运行
- 基于SQL Server 2008 Service Broker构建企业级消息系统
- Windows主机管理系统Websitepanel
- 自定义Appfabric Cache 配置提供程序
- 2017年发生在上海的科技大新闻
- REST当中为什么要使用HTTP PUT
- 推荐一个在Linux/Unix上架设ASP.NET的 WEB服务器--Jexus
- 人工智能与工业融合:没有你,对我很重要……
- DeepMind哈萨比斯对话哈里王子:2018年AI最大的突破在生物或化学
- 提升用户体验,微信小程序“授权失败”场景的优雅处理
- extjs 基础部分
- WordPress 网站开发“微信小程序”实战(二)
- Extjs form 组件
- Extjs grid 组件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法