50天50个页面-DAY1-Expanding Card

效果展示：

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>expanding-card</title></head><body><div class="container"><divclass="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><divclass="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><divclass="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><divclass="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><divclass="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>

CSS

* {/* 盒子计算方式为：总宽度=内容宽度+padding+border */box-sizing: border-box;
}/* 整个页面 */
body {font-family: "Muli", sans-serif; /* 字体 */display: flex; /* 页面浮动布局 */flex-direction: row; /* 设置主轴为row(默认) */justify-content: center; /* 设置主轴上子元素居中排列 */align-items: center; /* 设置侧轴上子元素居中排列 */height: 100vh; /* 100%要求父级全为100%才生效，100vh针对当前盒子 */overflow: hidden; /* 溢出隐藏 */margin: 0; /* chrome中body的margin默认为8 */
}/* 大容器盒子 */
.container {display: flex; /* 页面浮动布局 */width: 90vw; /* 宽度自适应布局 */
}.panel {background-size: cover; /* 背景图片全覆盖，可能显示不全 */background-position: center; /* 背景图片居中 */background-repeat: no-repeat; /* 背景图片不重复 */height: 80vh; /* 高度自适应布局，为上层容器的80% */border-radius: 50px; /* 圆角 */color: #fff; /* 文字颜色 */cursor: pointer; /* 鼠标指针的样式 */flex: 0.5; /* 这是以下三个属性的简写 *//* flex-grow: 0.5 设置盒子增大的占比 *//* flex-shrink: 0.5 子盒子超过父盒子宽度后，超出部分缩小的比例 *//* flex-basis: 0% 设置盒子基准宽度，而且basis会取代width */margin: 10px; /* 设置盒子外边框 */position: relative; /* 相对位置定位，子绝父相 */transition: all 300ms ease-in; /* 元素过渡 none|all|属性 持续时间 时间函数 延迟时间 */
}.panel h3 {font-size: 24px; /* 字体大小 */position: absolute; /* 绝对定位 */bottom: 20px; /* 距底部20px */left: 20px; /* 距左侧20px */margin: 0; /* 清除外边距 */opacity: 0; /* 完全透明 */
}.panel.active {flex: 5; /* 增宽权重 *//* flex布局中，父元素内部的子元素根据权重分配剩余空间，共5个元素，则该元素分配的空间占比为5/(0.5*4+5) */
}.panel.active h3 {opacity: 1; /* 元素的透明度为1 */transition: opacity 0.3s ease-in 0.4s; /* 过渡显示透明度 */
}/* 设备屏幕宽度<=680px时应用css样式 */
@media (max-width: 680px) {.container {width: 100vw;}/* 宽度满足时不显示第四、第五个元素 */.panel:nth-of-type(4),.panel:nth-of-type(5) {display: none;}
}

JavaScript

// 将所有panel类的元素节点封装成数组返回
const panels = document.querySelectorAll(".panel");// 鼠标点击后，清除所有active类后重新赋给点击的元素
// forEach()方法对数组的每个元素执行一次提供的函数。
panels.forEach((panel) => {/* 箭头函数，通过监听器点击执行 */panel.addEventListener("click", () => {removeActiveClasses(); // 删除所有active类panel.classList.add("active"); // 对当前点击的元素赋active类});
});// 删除所有active类
function removeActiveClasses() {// 遍历panels数组中的每一个panel，删除active类panels.forEach((panel) => {panel.classList.remove("active");});
}

50天50个页面-DAY1-Expanding Card相关推荐

50 Projects 50 Days - Expanding Cards 学习记录
50 Projects 50 Days不使用任何前端框架,适合初学者练手,巩固前端基础,在这里记录一下学习过程,尤其是一些细节上的问题. 项目地址 Expanding Cards 展示效果 Expan ...
HDU——1498 50 years, 50 colors
50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
关于CSS中left:50%; top:50%; margin-left: -150px; margin-top: -75px;
#login_box {width: 300px;height: 150px;background: #eee;border: 1px solid #ccc;position: absolute;le ...
?软件测试mysql面试题：varchar(50)中50的涵义?
varchar(50)中50的涵义? 最多存放50个字符,varchar(50)和(200)存储hello所占空间一样,但后者在排序时会消耗更多内存,因为order by col采用fixed_len ...
50天50个前端小项目（纯html+css+js）第六天（页面滚动动画）
今天我们来实现的是页面滚动动画,比如说页面使用鼠标滚轮向下滚动的时候,内容区域会分别从左从右滑动到居中的内容区域,大概效果如下: 接下来来看实现首先是html: 没什么特别的地方,主要就是设置一些内 ...
EasyExcel 低内存导出大数据量的Excel方案探索 50万行 50列（附：实现代码）
文章目录 1.前言 2.准备工作 3.导出测试 3.1.单次查询.全量导出 3.2. 多次查询,多个文件,单次写入 3.3.多次查询,多个文件,多次写入 3.4.多线程导出探索 3.5.文件打包成ZI ...
HDU 1498：50 years, 50 colors（二分图匹配）
http://acm.hdu.edu.cn/showproblem.php?pid=1498 题意:给出一个 n*n 的矩阵,里面的数字代表一种颜色,每次能炸掉一排或者一列的相同颜色的气球,问有哪些颜 ...
50欧姆 50Ω 同轴双端口衰减器(DC-40GHz ；2W---10KW)
在EUT test for EMC电磁兼容过程中,需要使用一些衰减器附件来达到衰减信号以保护后级接收机的作用,所以深圳市易优特测试技术有限公司在集成EMC测试系统的过程中为客户配置了多种衰减器产品,下 ...
php工作心得简50字,50字简短个人工作总结
50字小学班长一周工作总结本周同学们的表现都比较好,原先有些吵闹的同学在这个星期的表现都有了提高.同学们上课认真听讲,上课积极发言,课后及时完成作业,服从老师的安排.同学们互相帮助,学习气氛很好.希 ...

50天50个页面-DAY1-Expanding Card

50天50个页面-DAY1-Expanding Card相关推荐

最新文章

热门文章