乐趣区

关于javascript:JS30Wes-BosFlex容器实现的画廊特效

jiezi

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 上，如果读者有趣味，无妨试一试。

退出移动版