Day1—图片动态过渡

最新推荐文章于 2022-12-08 14:58:19 发布

我不喜欢过马路

最新推荐文章于 2022-12-08 14:58:19 发布

阅读量955

点赞数 2

分类专栏： HTML+CSS+JS 文章标签： html css javascript

本文链接：https://blog.csdn.net/qq_43215827/article/details/121663871

版权

HTML+CSS+JS 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

前言：为熟悉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>