发现了一个博主的文章👇
50个前端入门练手项目，助你掌握前端基础知识_前端达人的博客-CSDN博客1.Expanding Cards效果如图所示:1.png源码[1]在线示例[2][ ] 知识点总结:CSS:弹性盒子布局中的flex属性:让所有弹性盒模型对象的子元素都有相同的长度，且忽...
https://blog.csdn.net/Ed7zgeE9X/article/details/119988116博主分享了50个小项目，展示了实现后的效果。对我这种小新手很有意义。实现了一下博主发出来的效果。可能部分思考不太周到，欢迎指正~~~
1.Expanding Card
分析思路：5个div，点击一个div时，展开当前div，其他div收缩；里面用到了一个元素.classList.toggle(类名)：classList意思是获取当前元素下的所有类型，toggle(类名)是判断有无特定类名，有就删去，没有就加上
html源码：（注释里有采用其它写法实现，再次点击相同div收缩，试着玩玩）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" href="css/style.css" rel="stylesheet" />
<!-- <script src="../js/jquery-3.3.1.min.js"></script> -->
<script src="../js/jquery-3.3.1.min.js"></script>
<title>Expanding Card</title>
<script type="text/javascript">
// $(function(){
// for(let i = 1;i<=5;i++){
// let biaoqian = "#pic"+i;
// console.log(biaoqian);
// $(biaoqian).click(function(){
// let flag = $(biaoqian).hasClass('changeWidth');
// console.log(flag);
// if(flag){
// $(biaoqian).removeClass('changeWidth');
// }else{
// $('#out div').removeClass('changeWidth');
// $(biaoqian).addClass('changeWidth');
// }
// });
// }
// })
window.onload = function(){
let _oDiv;
var aDiv = document.getElementById("out").getElementsByClassName("pic");
for(let i = 0;i<5;i++){
console.log(aDiv[i])
aDiv[i].onclick=function(){
_oDiv?.classList.toggle('changeWidth')
// _oDiv?_oDiv.style.width='50px':'';
console.log('_odiv00 '+_oDiv);
_oDiv = aDiv[i];
aDiv[i].classList.toggle('changeWidth')
// aDiv[i].style.width= '300px';
console.log('_odiv01 '+_oDiv);
//22
// let len = aDiv[i].style.width;
// if(len === '300px'){
// aDiv[i].style.width='50px';
// }else{
// aDiv[i].style.width='300px';
// }
//222
// console.log(aDiv[i].classList);
// let flag = aDiv[i].classList.contains('changeWidth');
// // console.log(flag);
// if(flag){
// aDiv[i].classList.remove('changeWidth');
// }else{
// aDiv[i].classList.add("changeWidth");
// }
}
}
console.log('_odiv11 '+_oDiv);
}
</script>
</head>
<body>
<div id="out" class="out">
<div>
<div id="pic1" class="pic color1"></div>
</div>
<div>
<div id="pic2" class="pic color2"></div>
</div>
<div>
<div id="pic3" class="pic color3"></div>
</div>
<div>
<div id="pic4" class="pic color4"></div>
</div>
<div>
<div id="pic5" class="pic color5"></div>
</div>
</div>
</body>
</html>
css源码：
.out{
display: flex;
flex-direction: row;
width:100%;
height:250px;
}
.pic{
width:50px;
height: 200px;
margin-left: 20px;
border-radius: 40px;
}
.changeWidth{
width:300px;
}
.color1{
background-color: #0000FF;
}
.color2{
background-color: #aa00ff;
}
.color3{
background-color: #ffaa7f;
}
.color4{
background-color: #ff0000;
}
.color5{
background-color: #55ff7f;
}2.Progress Steps
分析思路：先画出静态样式，再写js。分为上下两部分；上部分：1234和连接的地方都用div；下部分用两个div；难点是如何实现连接部分动态变蓝：我的思路是连接部分采用两个div，将蓝色固定在浅色上面，通过改变蓝色小条的宽度，实现收缩。采用到了定时器、回调函数。
html源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progress Steps</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div id="out" class="out">
<div id="top" class="top">
<div class="top_one">1</div>
<div class="top_one_right">
<div id="fd0" class="top_one_right_in"></div>
</div>
<div class="top_two">2</div>
<div class="top_one_right">
<div id="fd1" class="top_one_right_in"></div>
</div>
<div class="top_two">3</div>
<div class="top_one_right">
<div id="fd2" class="top_one_right_in"></div>
</div>
<div class="top_two">4</div>
</div>
<div id="bottom" class="bottom">
<div id="up" class="bottom_in" onclick="upClick()">上一步</div>
<div id="down" class="bottom_in">下一步</div>
</div>
</div>
<script>
// window.onload=function(){
var count = 1;
var towLeft = document.getElementsByClassName("top_one_right");
var two = document.getElementsByClassName("top_two");
// 上一步
var up = document.getElementById("up");
function upClick(){
console.log('点击了上一步');
count--;
if(count<1){
count =1;
return
}
shrinkAnimate(count-1);
// towLeft[count-1].style.backgroundColor = '#dededf';
two[count-1].style.border="5px solid #dededf";
}
// 下一步
var down = document.getElementById("down");
down.onclick = function(){
console.log('点击了下一步');
count++;
if(count> 4){
count = 4;
return
}
for(let i =count;i<=4;i++){
if(count === i){
spreadAnimate(i-2,two[i-2], () => {
two[i-2].style.border="5px solid #2497ef";
});
// towLeft[i-2].style.backgroundColor = '#2497ef';
// two[i-2].style.border="5px solid #2497ef";
}
}
}
// 展开动画效果
function spreadAnimate(index,numDiv, callBack){
var _oDiv = "fd"+index;
console.log(_oDiv);
var gb = document.getElementById(_oDiv);
let len = gb.clientWidth||0;
console.log("长度1",len,gb.offsetWidth)
var ds = setInterval(changeWidth,5);
function changeWidth(){
console.log('调用计时-len---',len);
if(len<95){
len = len+5;
console.log('_len',len,gb.offsetWidth);
gb.style.width = len+"px";
}else{
clearInterval(ds);
callBack && callBack()
// numDiv.style.border="5px solid #2497ef";
}
}
}
// 收缩动画效果
function shrinkAnimate(index){
var _oDiv = "fd"+index;
console.log(_oDiv);
var gb = document.getElementById(_oDiv);
let len = gb.clientWidth||95;
console.log("长度1",len,gb.offsetWidth)
var ds = setInterval(changeWidth,5);
function changeWidth(){
console.log('调用计时-len---',len);
if(len<0){
clearInterval(ds);
}else{
len = len-5;
console.log('_len',len,gb.offsetWidth);
gb.style.width = len+"px";
}
}
}
// }
</script>
</body>
</html>
css代码:
.out{
margin: 50px auto;
width: 700px;
height: 150px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.top{
width: 500px;
height: 75px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.top_one{
width: 50px;
height: 50px;
border: 5px solid #2497ef;
border-radius: 50%;
text-align: center;
line-height: 50px;
z-index: 1;
}
.top_one_right{
margin-left: -1px;
margin-right: -1px;
width: 100px;
height: 5px;
border: 1px solid #dededf;
background-color: #dededf;
position: relative;
}
.top_one_right_in{
position: absolute;
width: 0px;
height: 5px;
border: 1px solid #2497ef;
background-color: #2497ef;
top:0px;left: -2px;
}
.top_two{
width: 50px;
height: 50px;
border: 5px solid #dededf;
border-radius: 50%;
text-align: center;
line-height: 50px;
z-index: 1;
}
.bottom{
width: 250px;
height: 75px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
.bottom_in{
width: 85px;
height: 40px;
border: 1px solid #ddddde;
background-color: #ddddde;
border-radius: 10px;
text-align: center;
line-height: 40px;
color: black;
}
.bottom_in:active{
width: 90px;
height: 45px;
border: 1px solid #2497ef;
background-color: #2497ef;
/* border-radius: 10px; */
/* text-align: center; */
line-height: 45px;
color: white;
}3.Rotating Navigation Animation
（这个写的不好）分析思路：将其看成3个重叠的div，设置重叠的优先级z-index；点击左上角div时，第二个div旋转，同时第三个div里的div缓慢出现；再次点击左上角，恢复原状。这里的难点是如何旋转。需要了解到css的一个过渡或者动画属性，这里采用的是transform
html源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rotating Navigation Animation</title>
<link type="text/css" href="style.css" rel="stylesheet" />
</head>
<body>
<div id="out" class="out">
<div id="one" class="top">
<div id="oneClick" class="top_top">三</div>
</div>
<div id="two" class="center"></div>
<div id="three" class="bottom">
<div id="threeIn" class="bottom_in">
</div>
</div>
</div>
<script>
let oDiv = document.getElementById("one");
let count=0;
// 点击事件
oDiv.onclick = function(){
count++;
console.log('count11==',count);
//三->X
let _oDiv = document.getElementById("oneClick");
let _oDiv3 = document.getElementById("threeIn");
if(count%2===1){
_oDiv.innerText = "X";
}else{
_oDiv.innerText = "三";
}
// 出现菜单栏
_oDiv3.classList.toggle("bottom_in_change");
// 第二个div旋转
let _oDiv2 = document.getElementById("two");
_oDiv2.classList.toggle("center_change");
}
</script>
</body>
</html>
css样式：
*,div{
padding: 0;margin: 0;
}
.out{
width: 100%;height: 100%;position: absolute; // 充满屏幕
border:3px solid red;
overflow: hidden;
/* background-color: #55FF7F; */
}
.top{
width: 150px;
height: 150px;
background-color: #2396ef;
position: absolute;
border-radius: 50%;
top: -75px;left: -75px;
z-index: 3;
}
.top_top{
/* content: '三'; */
font-size: 30px;
color: white;
position: absolute;
top: 80px;left: 85px;
z-index: 3;
}
.top_top:active{
/* content: 'X'; */
font-size: 40px;
}
.center{
/* border: 3px solid #DDDDDE; */
width: 100%;
height: 100%;
background-color: #FFFF00;
position: absolute;
top:0;left: 0;
z-index: 1;
transition: transform 2.5s;
transform-origin:5% 5%;
}
.center_change{
transform: rotate(-10deg);
}
.bottom{
/* border: 3px solid #0000ff; */
width: 100%;
height: 100%;
background-color: #0000ff;
position: absolute;
top:0;left: 0;
}
.bottom_in{
width: 50px;
height: 150px;
background-color: red;
z-index: 2;
position: absolute;
top: calc(100% - 200px);
left: -50px;
transition: left 2s;
/* transition-timing-function: ease-in; */
}
.bottom_in_change{
left: 15px;
}
1201
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
