- A+
所属分类：Web前端
50 Projects
01 Expanding Cards(附带新手菜鸡注释)
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"> <title>Expanding cards</title> <link rel="stylesheet" href="/static/css/Expanding-cards.css"> </head> <body> <div class="container"> <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>Explore 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 type="module" src="/js/Expanding-cards.js"></script> </body> </html> CSS
* { box-sizing: border-box; } body { 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; /* 过渡方式，好多动画用到这个，看来着重要学一下，不过这个all好像去掉不影响大局？ */ transition: all 700ms ease-in; /* 时间影响展示时间，感觉调节时间匹配更好 */ } .panel h3 { font-size: 24px; position: absolute; /* 定义说明文字位置 */ bottom: 20px; left: 20px; margin: 0; /* 文字透明度 */ opacity: 0; } .active { /* 这个MDN上说是增长系数，就是比值可以这样说吧，按我来讲 */ flex: 5; } .active h3 { /* 如果有active属性，就将说明文字显现 */ opacity: 1; transition: opacity 0.3s ease-in 0.4s; } @media (max-width: 480px) { /* 一般而言这种都是电脑展示吧，所以很鸡肋？当然依然不可或缺，可以不用，但不能没有 */ .container { width: 100vh; } } /* 下面这个真的不知道为什么有啊 */ /* .panel:nth-of-type(4), .panel:nth-of-type(5) { display: none; } */ JS
const panels = document.querySelectorAll('.panel'); // 找到pnael标签，这应该是列； // console.log(panels); // 遍历所有的元素，查看谁被点击了，找到之后将其他元素的active全部清除，并为当前属性添加active panels.forEach(function(panel) { //遍历 panels 序列 panel.addEventListener('click', function(){ removeActiveClasses(); //移除 active标签 panel.classList.add('active'); }); }); function removeActiveClasses () { panels.forEach(function (panel) { panel.classList.remove('active'); }) } 02 Hidden-search
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"> <title>Hidden-search</title> <link rel="stylesheet" href="/static/css/hidden-search.css"> <link rel="stylesheet" href="/third-part/font-awesome-4.7.0/css/font-awesome.min.css"> </head> <body> <div class="search"> <input type="text" class="input" placeholder="Search..."> <button class="btn"> <i class="fa fa-search" aria-hidden="true"></i> </button> </div> <script type="module" src="/js/hidden-search.js"></script> </body> </html> CSS
* { box-sizing: border-box; } body { /* 背景图片为渐变色 */ background-image: linear-gradient(90deg,#7d5fff,#7158e2); /* flex布局 */ display: flex; /* 竖直居中 */ align-items: center; /* 水平居中 */ justify-content: center; /* 非常奇怪啊，有100vh可以居中，100%不成 */ height: 100vh; overflow: hidden; margin: 0; } .search { position: relative; height: 50px; } .search .input { background-color: #fff; border: 0; font-size: 18px; padding: 15px; height: 50px; width: 50px; /* 转变属性width */ transition : width 0.3s ease; } .btn { background-color: #fff; border: 0; cursor: pointer; font-size: 24px; position: absolute; top: 0; left: 0; height: 50px; width: 50px; /* 平滑移动 */ transition : transform 0.3s ease; } .btn:focus, .input:focus { outline: none } .active .input { width: 200px; } .active .btn { /* 向X轴偏移198px */ transform: translateX(198px); } JS
let search = document.querySelector('.search'); let btn = document.querySelector('.btn'); let input = document.querySelector('.input'); // 添加监听函数 btn.addEventListener('click',function(e) { // 如果active已经存在，则移除它，否则添加属性 search.classList.toggle('active'); // 效果：<div class="search active"></div> console.log(search); // input.focus(); }); 
