使用JS和CSS制作的小案例（day一）

最新推荐文章于 2024-08-12 22:28:07 发布

有一个挚爱

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量557

点赞数 12

文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/weixin_74068942/article/details/140416419

版权

一、写在开头

本项目是从github上摘取，自己练习使用后分享，方便登录github的小伙伴可以看本篇文章

50项目50天https://github.com/bradtraversy/50projects50days有兴趣的小伙伴可以自己去github上查看。

二、项目开始

开始展示的是第一张图片，鼠标点击之后，对应的图片所占据的大小变化，达到展开的效果

这里，我先贴出对应的代码，在带大家一点点剖析一下。

html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>扩展卡片</title>
</head>
<body>
    <!-- 扩展卡片开始 -->
        <div class="container">
            <div class="panel active" style="background-image: url(./images/test1.jpg);">
                <h3>Explore The World</h3>
            </div>
            <div class="panel" style="background-image: url(./images/test2.jpg);">
                <h3>Wild Forest</h3>
            </div>
            <div class="panel" style="background-image: url(./images/test3.jpg);">
                <h3>Sunny Beach</h3>
            </div>
            <div class="panel" style="background-image: url(./images/test4.png);">
                <h3>City on Winter</h3>
            </div>
            <div class="panel" style="background-image: url(./images/test5.jpg);">
                <h3>Mountains - Clouds</h3>
            </div>
        </div>
    <!-- 扩展卡片结束 -->
    <script src="index.js"></script>
</body>
</html>

css结构

* {
    box-sizing: border-box;
}

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 {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    transition: all 700ms ease-in;
}

.panel h3{
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    padding: 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),
    .panel:nth-of-type(5) {
      display: none;
    }
  }

js代码

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');
    })
}