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之后就会回归本来的面貌.
- 中国区块链技术和产业发展论坛举行——区块链应用发展尚需时日
- silverlight获取外部数据的另一种选择:FluorineFx
- 存储状态数据
- Oracle数据库设置为归档模式的操作方法
- flash/flex 与 FluorineFx通讯之Hello World!
- 苹果CEO首次泄露出自动驾驶汽车的相关战略信息
- Linux下绑定网卡的操作记录
- flash开发中如何实现界面代码分离
- flex中使用swc实现更好的界面代码分离
- Redis Cluster集群总结性梳理
- jquery的html,text,val
- Redis Cluster日常操作命令梳理
- MongoDB数据存储-深入了解
- Linux下通过受限bash创建指定权限的账号
- 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 数组属性和方法
- pytest 测试框架学习(12):pytest.deprecated_call
- Pinstaller(Python打包为exe文件
- pytest 测试框架学习(14):pytest.warns
- ImportError: /lib64/libm.so.6: version `CXXAB_1.3.8.' not found (required by /usr/local/python37/lib
- pytest 测试框架学习(15):pytest.freeze_includes
- Linux: scp文件,目录上传下载标准版
- Hibernate第三天:Hibernate的一对多配置、Hibernate的多对多的配置
- Git: 掉坑记 -- git reset 杀手
- ModuleNotFoundError: No module named 'phkit.pinyin'
- Hibernate第四天:Hibernate的查询方式、抓取策略
- 爬虫抓取博客园前10页标题带有Python关键字(不区分大小写)的文章
- Python爬虫抓取唐诗宋词
- ImportError: /lib64/libm.so.6: version `GLIBC_2.23' not found (required by /usr/local/python37/lib/p
- 数据分析与数据挖掘 - 02基础操练
- 数据分析与数据挖掘 - 03智能对话