✨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') }) }
图片大家可以随意找其他的，效果是一样的
有哪些不明白的可以在评论区进行讨论，或是有不对的地方欢迎大家指出来，互相学习进步
希望大家可以多多支持，一键三连并分享😊😄
