current position:Home>[front end small item 02] extension card

[front end small item 02] extension card

2022-01-27 02:30:15 Nefu_ qky

The online demo : Expansion card
My personal website : Front end project summary
Pre knowledge :CSS3 Elastic layout 、 Simple JS

One . analysis

 Insert picture description here

Page design

Page by 5 The cards form a line

If using traditional layout , You can use float Attribute or position:absolute or display:inline-block Realization ; But they are not convenient for subsequent animation effects ( Change element width ), A better way is to use elastic layout .

Set the container element to the following style :

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

Each card is set to flex:1, The activated card is set to flex:4 The layout is completed

Animation effect

This animation effect is relatively simple , Is the enlargement of the card and the reduction of other cards , First define an animation class

.active {
    
	flex: 4;
}

then JS In order to achieve this animation effect , Just add a click event to each card ( In fact, the effect of mouse suspension event is also good ), After being clicked, first define all card class names as card, Then add... To the name of the clicked card class active that will do

Two . Code

Because the code is simpler , So it's all in one file

<!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>

copyright notice
author[Nefu_ qky],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2022/01/202201270230119779.html

Random recommended