js05 - Flex Panel Gallery

最新推荐文章于 2022-05-08 11:52:34 发布

ccrispy

最新推荐文章于 2022-05-08 11:52:34 发布

阅读量156

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xxiizzeefather/article/details/108484471

版权

该博客主要探讨了如何利用CSS的Flex布局创建一个图片画廊，并结合JavaScript实现交互功能，如添加和移除类以响应用户点击，以及解决在快速双击图片时字体与图片位置同步的问题。

摘要由CSDN通过智能技术生成

内容

针对CSS学习flex部分

#### 针对 Flex items 的特性（Children）

- `flex-growth`：伸展值
- `flex-shrink`：可接受的压缩值
- `flex-basis`：元素默认的尺寸值
- `flex`：以上三个值按顺序的缩写

#### 针对 Flex container 的特性（Parent）

- `display: flex`：将这个元素设置成弹性盒子
- `flex-direction`：主轴方向
	- `row`：横向
	- `column`：纵向
- `justify-content`：沿主轴的的对齐方式
- `align-items`：沿侧轴的对齐方式
- `align-content`：子元素中文本沿侧轴的对齐方式（只有一行时无效）

通过js获取标签以后将特定的panel`flex`大小进行改变，从而改变panel占位大小
由于每个panel中含有3个p标签,所以可以用:first-child以及:last-child进行控制第1及第3个p标签
.panel > *:first-child{
   
	//使第一个p标签元素沿Y轴向上移动100%,即为-100%,平移出屏幕
	transform: translateY(-100%)
}
.panel.open-active > *:first-child{
   
	//使第一个p标签元素沿Y轴向下移动100%,即为返回0,平移回屏幕原位置
	transform: translateY(0)
}
//同理可得
.panel > *:last-child{
   
	transform: translateY(100%)
}
.panel.open-active > *:last-child{
   
	transform: translateY(0)
}

针对JS部分

this.classList.toggle()
这个方法可以给dom元素添加类，消除类。点击行为，转换。
通过click事件给相关的dom元素特定的panel添加事件

//设定方法函数,令toggleOpen函数为转换dom元素类
function toggleOpen(){
   
	this.classList.toggle('open')
}
//定义panels,从dom中获取
const panels = document.querySeletorAll('.panel')
//forEach遍历panels,给所有的panels加上click事件,方法为toggleOpen()
panels.forEach(panel => panel.addEventListener('click',toggleOpen))

//给文字添加变换
function toggleActive(e){
   
	//获取值名
	console.log(e.propertyName);
	//形变由于flex-grow,故当值名含有flex时进行添加类
	if(e.propertyName.includes('flex')){
   
		console.log(e.propertyName);
		//添加open-active类
		this.classList.toggle('open-active')
	}
}
//forEach遍历panels,给所有的panel加上transitionend事件,方法为toggleActive
panels.forEach(panel => panel.addEventListener('transitionend',toggleActive))

源start文件代码(取自github JavaScript 30 - 05 )

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Panels 💪</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
  <style>
    html {
   
      box-sizing: border-box;
      background: #ffc600;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    
    body {
   
      margin: 0;
    }