[JavaScript知识库] Day1—图片动态过渡

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Day1—图片动态过渡 -> 正文阅读

[JavaScript知识库]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>