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之后就会回归本来的面貌.
- [自定义服务器控件] 第三步:CheckBoxList。
- 用Keras通过Python进行卷积神经网络的手写数字识别
- 反射的另类实现。(不知道这么用还算不算反射了?)
- 如何让普通变量也支持事务回滚?
- What is "Type" in managed heap?
- 一个特殊场景的 LR 预测优化 Trick
- 你知道Unity IoC Container是如何创建对象的吗?
- 发布一个锁定行列的一种方法。(实现Excel里的冻结窗格的功能)
- IoC+AOP的简单实现
- 使用了继承、多态还有工厂模式和反射,但是还是没有OO的感觉。[已经增加了实现的代码]
- OO——从不知到知道一点,从迷茫到豁然开朗 (迟来的我的2002到2007)
- 只在UnitTest和WebHost中的出现的关于LogicalCallContext的严重问题
- TEST LAB V8在线渗透实验室教程(三)
- CMQ请求域名
- 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 数组属性和方法
- 网站被恶意镜像怎么办 php一段代码轻松搞定(全面版)
- 如何基于Python爬取隐秘的角落评论
- PHP微信网页授权的配置文件操作分析
- php微信公众号开发之关键词回复
- Python 抓取数据存储到Redis中的操作
- PHP常见字符串操作函数与用法总结
- 利用python对excel中一列的时间数据更改格式操作
- Python 私有属性和私有方法应用场景分析
- django 模型字段设置默认值代码
- Python局部变量与全局变量区别原理解析
- 为什么是 Python -m
- Python csv文件记录流程代码解析
- 简单的Python人脸识别系统
- PHP实现的微信公众号扫码模拟登录功能示例
- PHP获取数据库表中的数据插入新的表再原删除数据方法