Day1—图片动态过渡

前言：为熟悉HTML、CSS和JavaScript，从GitHub上选取项目代码进行解析和学习。

一、总体效果

功能：点击每一个图片会动态划过。
实现方式：新建一个文件夹，文件夹中新建三个txt,改后缀，分别命名style.css;script.js;index.html;将下面三部分代码对应放入。

二、JavaScript部分

const panels=document.querySelectorAll('.panel')
panels.forEach(panel=>{panel .addEventListener('click',()=>{removeActiveClasses()panel.classList.add('active')})
})
function removeActiveClasses(){panels.forEach(panel=>{panel.classList.remove('active')})
}

代码解析
第一行：
获取文档中class=“.panel”的所有元素。

语法：
elementList = document.querySelectorAll(selectors);
其中elementList 是一个静态的 NodeList 类型的对象。
selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。

第二至七行：
1、利用forEach（）方法调用数组的每一个元素，并将元素传递给回调函数。

语法：array.forEach(function(currentValue, index, arr), thisValue)
其中function(currentValue, index, arr)必需，数组中每个元素需要调用的函数；currentValue必需，指当前元素；index可选，指当前元素的索引值；arr可选，值当前元素所属的数组对象。
2、利用箭头函数 panel=>{ }
箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

语法

3、利用element.addEventListener()方法向指定元素添加事件句柄。

语法： element.addEventListener(event, function, useCapture)

4、利用element.classList.add(),为元素添加新的类
第八至十二行：
定义了removeActiveClasses()函数，语法同上。

小结：我理解的Js部分代码是为实现面板图像的一个动态转换，当点击一个面板，移除active，显示一个图片，点击完所有面板后再添加active，回到初始状态。

三、css部分

@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); /*import Google Fone*/*{box-sizing:border-box;/*计算元素的总宽度和总高度；content-box:表示设置的宽度中不包括padding（内边框）和border（边框）；bortder-box:表示设置的宽度中包括padding（内边框）和border（边框）；inherit:从父元素继承；*/
}
body{font-family: 'Muli',sans-serif;display: flex;align-items: center;justify-content: center;height: 100vh;overflow: hidden;margin: 0;
}
.container{/*用于固定宽度并支持响应式布局的容器,弹性盒子之类*/display: flex;width: 90vw;
}.panel{/*.panel表示类选择器设置面板背景大小、位置、颜色、高度、四个角的弧度等*/background-size: cover;background-position: center;background-repeat: no-repeat;height: 80vh;border-radius: 50px;color: #fff;cursor: pointer;  /*定义鼠标指针放在一个元素范围内时所用的光标形状。pointer是一只手*/flex: 0.5; /*设置让所用弹性模型对象的子元素都有相同的长度*/margin: 10px; /*设置元素的所有四个边距*/position: relative;-webkit-transition: all 700ms ease-in; /*过渡效果*/}.panel h3{font-size: 24px;position: absolute;bottom: 20px;left: 20px;margin: 0;  /*设置元素的所有四个边距*/opacity: 0; /*设置元素的透明度级别*/
}.panel.active{flex: 5;
}
.panel.active h3{opacity: 1; /*设置元素的透明度级别*/transition: opacity 0.3s ease-in 0.4s; /*设置元素过渡效果*/
}@media (max-width:480px){.container{width: 100vw;}.panel:nth-of-type(4),.pamel:nth-of-type(5){display: none;}
}

代码解析
第一块：
利用@import设置文本字体为谷歌字体

第二块：*{}
目的是设置元素总宽度和总高度
其中 *{}表示class类选择器，class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

第三块：body{ }
目的设置body中字体、显示等属性

第四块：.container{ }
目的是用于固定宽度并支持响应式布局的容器,弹性盒子之类【这块我理解的不是很好】

第五块：.panel{ }
目的是设置每一个面板的背景、大小等属性

第六块：.panel h3{ }
目的是设置面板中标题3的样式。透明度级别

第七块：.panel.active{ }
目的设置样式

第八块：.panel.active h3{}
目的设置样式

第九块：@media (max-width:480px){ }
CSS @规则可用于基于一个或多个媒体查询的结果来应用样式表的一部分。使用它，您可以指定一个媒体查询和一个CSS块，当且仅当该媒体查询与正在使用其内容的设备匹配时，该CSS块才能应用于该文档。

nth-of-type伪类指定一个实际参数，这个参数使用一种模式来匹配哪些元素应该被选中。

小结：CSS部分设置出现在页面的每一个要素的属性。

四、HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="style.css"/><title>探索</title>
</head>
<body><div class="container"><div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80');"><h3>Explore The World</h3></div><div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"><h3>Wild Forest</h3></div><div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')"><h3>Sunny Beach</h3></div><div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')"><h3>City on Winter</h3></div><div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"><h3>Mountains - Clouds</h3></div></div><script src="script.js"></script></body>
</html>

代码解析

head部分引入css样式
body部分设置一个大标签，大标签内有5个小标签；

后期继续进行代码解析，加油！
转载请说明出处，谢谢！