记录一下JS小项目（50day50project）

动物世界647

于 2022-12-14 16:21:46 发布

阅读量131

点赞数

文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/weixin_63186246/article/details/128318056

版权

代码放在下面，有需要的可以自己尝试一下

效果图

新建一个index.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="style.css" />
    <title>Expanding Cards</title>
  </head>
  <body>
    <div class="container">
      <!--这一行有两个class选择器起作用，分别是panel和active，注意不是一个选择器叫panel active-->
      <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标签撑开panel-->
        <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>

再建style.css文件

*{
    /*盒子尺寸包括padding和border*/
    box-sizing: border-box;
    
}
body{
    /*子元素container要flex布局,就要对父元素body设置display:flex*/
    display: flex;
    /*垂直方向居中显示*/
    align-items: center;
    /*水平方向居中显示*/
    justify-content: center;
    /*vh是view height视窗大小*/
    height: 100vh;
    /*溢出部分隐藏*/
    overflow: hidden;
    margin: 0;
}
.container{
    /*子元素panel要flex布局,就要对父元素body设置display:flex*/
    display: flex;
    /*vw是view weight视窗大小*/
    width: 90vw;
}
.panel{
    /*图片居中显示*/
    background-position: center;
    /*图片裁切放大到撑满panel*/
    background-size: cover;
    /*不会重复*/
    background-repeat: no-repeat;
    /*vh是view height视窗大小*/
    height: 80vh;
    /*字体颜色为白色*/
    color: white;
    /*图片比例占0.5份*/
    flex: 0.5;
    /*让每张图片有间距*/
    margin: 10px;
    /*panel h3要绝对定位，相对于第一个相对定位relative父元素定位*/
    position: relative;
    /*给每张图片添加圆角半径为50px*/
    border-radius: 50px;
    /*过渡属性对所有的css设置，作用时长为0.7s,动效为加速*/
    transition: all 0.7s ease-in;
}
.panel h3{
    /*相对于panel图片定位*/
    position: absolute;
    /*相当于top:-20px*/
    bottom: 20px;
    /*向右移动20px*/
    left: 20px;
    /*透明度为0*/
    opacity: 0;
    /*因为pannel设置了margin：10px，文字会偏上，这里去除margin*/
    margin: 0;
}
.panel.active{
    /*flex第一张图片比例占5份*/
    flex: 5;
}
.panel.active h3{
    /*只有第一张图片上的字，透明度为1*/
    opacity: 1;
    /*过渡属性只对透明度生效*/
    transition: opacity 0.3s ease-in 0.4s;
}
/*媒体查询，在宽度小于480px的屏幕上，第4,5张图片不显示*/
@media (max-width:480px){
    .container{
        width: 100vh;
    }
    /*这种选择方式学到了*/
    .panel:nth-child(4),.panel:nth-child(5){
        display: none;
    }
}

最后创建script.js文件

//用document.querySelectorAll（）获取，用常量panels接收
const panels=document.querySelectorAll('.panel');
//把panels命名为item
panels.forEach((item)=>{
    //事件监听,鼠标点击一次就删除其他的active
    item.addEventListener('click',()=>{
        panels.forEach((item)=>{
            item.classList.remove('active');
        })
        //只给鼠标点击的，添加active
        item.classList.add('active');
    });
});