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之后就会回归本来的面貌.
- Java & PhantomJs 实现html输出图片
- 干货 | React Native实践之携程Moles框架
- Java并发学习之ThreadLocal使用及原理介绍
- ibeacon蓝牙技术简介
- Java并发学习之定时任务的几种玩法
- [视频直播]本周日先行者视频“React多级菜单
- Java并发学习之线程状态及Thread常用方法详解
- Java并发学习之四种线程创建方式的实现与对比
- Google protocol buffer简介
- Java反射的使用姿势一览
- [一对一讲什么] 之 测完了接口、搞好了目录,然后做啥?
- Java容器篇小结之List自问自答
- android断点下载
- [一对一讲什么] 之 什么叫切图?
- 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 数组属性和方法
- Mybatis高级查询(一):resultMap与resultType
- JDK错误用法—TimSort
- Mybatis高级查询(三):分页查询
- 以OpenResty搭建RTB竞价引擎接入层
- 优化Linux bootloader速度的究极之路:从GRUB到EFI Stub
- Linux--nc命令
- Netty之美--I/O模型
- 023.基于IT论坛案例学习Elasticsearch(二):Query高级知识(一)
- 打卡群刷题总结0807——验证二叉搜索树
- 打卡群刷题总结0808——二叉树的层序遍历
- Mybatis高级查询(四):延迟加载
- I/O多路复用器之隐秘的角落
- 打卡群刷题总结0809——二叉树的锯齿形层次遍历
- 简单的ssm整合练手项目:汽车项目
- 在spring-boot中使用pageHelper插件