day-01 one-day projects

news2024/9/19 10:38:35

个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：python学不会123
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡
每周完成3个 projects练习

文章目录

- ✨one-day projects

✨one-day projects

这次的项目用到我们所学的html+css3+js，适合有基础的小伙伴们，大家可以跟着我一起做项目练习，巩固基础，一起学习进步😊😀

显示效果如图所示
在这里插入图片描述

1.step1需要创建如下
在这里插入图片描述

注意：不要忘记引入<link rel="stylesheet" href="./one-day.css">不然会没有css的效果
<script type="text/javascript" src="./one-day.js"></script>引入js不要放在head标签中，放在body后，代码遵循从上往下执行顺序，不然js效果就不会出现

html代码如下：

 <div class="container">
		<div class="panel active" style="background-image:url(./image/01.jpg);">
			<h3>Explore The World</h3>
		</div>
		<div class="panel" style="background-image:url(./image/02.webp) ;">
			<h3>Wild Forest</h3>
		</div>
		<div class="panel" style="background-image:url(./image/03.webp) ;">
			<h3>Sunny Beach</h3>
		</div>
		<div class="panel" style="background-image:url(./image/04.webp) ;">
			<h3>City on Winter</h3>
		</div>
		<div class="panel" style="background-image:url(./image/05.webp) ;">
			<h3>Mountains - Clouds</h3>
		</div>
	 </div>

css代码如下：

 /* 设置页面最大宽度 */
 @media (max-width:480px) {
   .container {
     width: 100vw;
   }
 }

 @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

 * {
   box-sizing: border-box;
 }

 body {
   font-family: 'Muli', sans-serif;
   display: flex;
   /* 主轴居中对齐 */
   justify-content: center;
   align-items: center;
   height: 100vh;
   /* 溢出隐藏 */
   overflow: hidden;
   margin: 0;
 }

 .container {
   display: flex;
   width: 1000px;
 }

 .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;
   /* 属性渐变 */
   -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;
 }

.panel:nth-of-type(4),
.panel:nth-of-type(5)
{
  /* 隐藏该元素 */
display: none;
}

✨ js代码显示如下

const panels = document.querySelectorAll('.panel')
panels.forEach(panel => {
//addEventListener() 方法用于向指定元素添加事件句柄
    panel.addEventListener('click', () => {
        removeActiveClasses()
        console.log(123)
        //添加类
        panel.classList.add('active')
    })
})
function removeActiveClasses() {
    panels.forEach(panel => {
    //移除类
        panel.classList.remove('active')
    })
}