【前端小项目02】扩展卡片

最新推荐文章于 2024-08-25 00:03:51 发布

Nefu_qky

最新推荐文章于 2024-08-25 00:03:51 发布

阅读量573

点赞数 1

分类专栏：前端小项目文章标签：前端 css3 css js html

本文链接：https://blog.csdn.net/Qiuker_jl/article/details/121981776

版权

前端小项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

该博客介绍了如何通过CSS3的弹性布局（Flexbox）和简单的JavaScript来创建一个在线演示，展示当卡片被点击时，卡片会放大而其他卡片缩小的动画效果。页面布局主要依靠`display:flex`，每个卡片设置为`flex:1`，激活的卡片设置为`flex:4`。点击事件通过JavaScript实现，当卡片被点击时，移除所有卡片的`active`类并给当前卡片添加，从而触发动画。

摘要由CSDN通过智能技术生成

在线演示：扩展卡片
我的个人网站：前端项目汇总
前置知识：CSS3弹性布局、简单JS

一.分析

在这里插入图片描述

页面设计

页面由5张卡片排成一行组成

若使用传统布局方式，则可以使用float属性或position:absolute或display:inline-block实现；但它们都不便于后续的动画效果（改变元素宽度），更好的方式是利用弹性布局。

将容器元素设为如下样式：

#content {
	display: flex;
	justify-content: center;
	align-items: center;
}

每个卡片设为flex:1，激活的卡片设为flex:4即完成布局

动画效果

这个动画效果比较简单，就是卡片的放大以及其它卡片的缩小，首先定义一个动画类

.active {
	flex: 4;
}

然后JS中要想实现这个动画效果，就给每一个卡片加上点击事件（其实鼠标悬浮事件效果也不错），被点击后先把所有的卡片类名定义为card，再把被点击的卡片类名加上active即可

二.代码

因为代码比较简单，所以全部放在一个文件中了

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Expanding Cards</title>
    <style>
        * {
			margin: 0;
			padding: 0;
		}
		#content {
			width: 100vw;
			height: 100vh;
			background-color: grey;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.card {
			border-radius: 8%;
			height: 80%;
			margin: 10px;
			flex: 1;
			overflow: hidden;
			cursor: pointer;
			transition-duration: 0.5s;
		}

		.active {
			flex: 4;
		}

		#card1{
			background-image: url("./img/1.jpg");
			background-size: cover;
		}

		#card2{
			background-image: url("./img/2.jpg");
			background-size: cover;
		}

		#card3{
			background-image: url("./img/3.jpg");
			background-size: cover;
		}

		#card4{
			background-image: url("./img/4.jpg");
			background-size: cover;
		}

		#card5{
			background-image: url("./img/5.jpg");
			background-size: cover;
		}

	</style>
</head>

<body>
    <div id="content">
        <div id="card1" class="card active">
        </div>
        <div id="card2" class="card">
        </div>
        <div id="card3" class="card">
        </div>
        <div id="card4" class="card">
        </div>
        <div id="card5" class="card">
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
var cards = document.getElementsByClassName("card");
var len = cards.length;
for (let i = 0; i < len; i++) {
    cards[i].onclick = function() {
        for (let i = 0; i < len; i++)
            cards[i].className = "card";
        this.className = "card active";
    }
}
</script>