title: 【原生javascript我的项目】 Flex Panel 05
date: 2021-11-17 20:10:40
tags: 原生javascript我的项目
categories: 30个原生javascript我的项目
引言
本文介绍一个动静放映网页，知识点次要波及到flex容器，以及元素点击事件。
成果网站：https://janice143.github.io/f...
注释
一、html局部
次要为5个div元素将网页分为5块，横向排列。每一个div元素中有上中下三个p标签，对应3段话。
<div class="panels"> <div class="panel1 panel" onclick="clickOpen(1)"> <p>Hey</p> <p>Let's</p> <p>Dance</p> </div> <div class="panel2 panel" onclick="clickOpen(2)"> <p>Give</p> <p>Take</p> <p>Receive</p> </div> <div class="panel3 panel" onclick="clickOpen(3)"> <p>Experience</p> <p>It</p> <p>Today</p> </div> <div class="panel4 panel" onclick="clickOpen(4)"> <p>Give</p> <p>All</p> <p>You can</p> </div> <div class="panel5 panel" onclick="clickOpen(5)"> <p>Life</p> <p>In</p> <p>Motion</p> </div></div>二、css局部
css代码次要要实现5个div元素平均横向排列，每个div元素内有对应的背景图片、3个p标签的文本。P标签的文本在每一个div元素中也是左右居中、高低平均排列。次要是利用了flex容器来实现。
1 flex容器
参考网站：https://www.ruanyifeng.com/bl...
采纳 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素主动成为容器成员，称为 Flex 我的项目（flex item），简称"我的项目"。
容器的属性：
- flex-direction：我的项目的排列方向
- flex-wrap：默认状况下，我的项目都排在一条线（又称"轴线"）上。
flex-wrap属性定义，如果一条轴线排不下，如何换行。 - flex-flow：
flex-direction属性和flex-wrap属性的简写模式 - justify-content：我的项目在主轴上的对齐形式
- align-items：我的项目在穿插轴上如何对齐
- align-content：定义了多根轴线的对齐形式
我的项目的属性：
- order：我的项目的排列程序，数值越小，排列越靠前
- flex-grow：定义我的项目的放大比例，默认为0
- flex-shrink：我的项目的放大比例，默认为1
- flex-basis： 我的项目占据的主轴空间
- flex：是
flex-grow,flex-shrink和flex-basis的简写，默认值为0 1 auto - align-self：容许单个我的项目有与其余我的项目不一样的对齐形式，可笼罩
align-items属性
2 css字体
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">text-transform: uppercase;font-family: 'Amatic SC',cursive;text-shadow: 0 0 4px rgba(0,0,0,0.72),0 0 14px rgba(0,0,0,0.45);3过渡款式
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;transform:translateY(-100%);4 背景图片
background-size: cover;background-position: center;.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/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); }5其余
CSS选择器
* 将匹配文档的所有元素；> 组合器抉择前一个元素的间接子代的节点。
.panel > *抉择类名为panel的所以间接子元素
Js局部
我写的程序，大抵思路是在html代码里设置onclick属性，而后函数内容在js里写，不同的panel传入参数不一样
定位类名有两个以上的标签document.getElementsByClassName(panel${num} panel-open)；
// 点击panel 12345，给对应的panel增加.panel-open属性function clickOpen(num){ const panelNumIf = document.getElementsByClassName(`panel${num} panel-open`); const panelNum = document.getElementsByClassName(`panel${num}`); // console.log(panelNumIf[0]) if (panelNumIf[0]) panelNumIf[0].classList.remove('panel-open'); else panelNum[0].classList.add('panel-open');//增加panel-open类属性 console.log(`panel${num} panel-open`); };他人的程序，大抵思路是遍历5个Panel，监控是否有点击事件，有的话就运行toggleOpen函数，该函数里 this.classList.toggle('open')示意如果this有open类名，则删除，没有则加上。
e.propertyName获取transitionend的属性名，e.propertyName.includes('flex')蕴含flex字段的属性名
const panels = document.querySelectorAll('.panel');function toggleOpen() { console.log('Hello'); this.classList.toggle('open');}function toggleActive(e) { console.log(e.propertyName); if (e.propertyName.includes('flex')) { this.classList.toggle('open-active'); }}panels.forEach(panel => panel.addEventListener('click', toggleOpen));panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));总结
残缺代码放在了Github上，如果读者有趣味，无妨试一试。