[英]Toggle flip 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>hayden dyer</title>
<link rel="stylesheet" href="./style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front about">
<h2>About Me</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__header">
<img src="./haydendyer080421bw.jpg" alt="my face" class="pic" />
<h2>Hi there! I'm Hayden Dyer.</h2>
</div>
<div class="card__body">
<p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front projects">
<h2>My Projects</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__body">
<p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure, aperiam eaque. quasi architecto illum reiciendis fuga ipsam distinctio quis. molestias rem harum, tempora quos pariatur dignissimos aperiam vitae amet esse?</p>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card__inner">
<div class="card__face card__face--front contact">
<h2>Contact</h2>
</div>
<div class="card__face card__face--back">
<div class="card__content">
<div class="card__body">
<h3><a href="mailto: hcdyer0@gmail.com" target="_blank" rel="noopener noreferrer">email</a></h3>
<h3><a href="https://www.linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer">linkedin</a></h3>
<h3><a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer">github</a></h3>
<h3><a href="https://twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer">twitter</a></h3>
</div>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
腳本.js:
const cards = document.querySelectorAll(".card__inner");
function flipCard() {
this.classList.toggle('is-flipped');
};
cards.forEach((card) =>card.addEventListener("click", flipCard));
樣式.css:
:root {
--dark: #312b2b;
--light: #F5EFEB;
}
* {
margin: 0;
padding: 0;
}
body {
background-color: var(--light);
font-family: 'Poppins', sans-serif;
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: row;
}
.card {
width: calc(100% / 3);
height: 100vh;
perspective: 800px;
}
.card__inner {
width: 100%;
height: 100%;
transition: transform 1s;
transform-style: preserve-3d;
cursor: pointer;
position: relative;
}
.card__inner.is-flipped {
transform: rotateY(180deg);
}
.card__face {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
overflow: hidden;
}
.card__face--front {
display: flex;
align-items: center;
justify-content: center;
}
.about {
background-color: #05668D;
}
.projects {
background-color: #028090;
}
.contact {
background-color: #00A393;
}
.card__face--front h2 {
color: var(--light);
font-size: 64px;
}
.card__face--back {
background-color: var(--light);
transform: rotateY(180deg);
display: flex;
align-items: center;
}
.pic {
display: block;
width: 192px;
height: 192px;
margin: 32px auto;
object-fit: cover;
}
.card__header h2 {
color: var(--dark);
font-size: 24px;
text-align: center;
}
.card__body {
padding: 32px;
}
.card__body h3 {
color: var(--dark);
font-size: 32px;
}
.card__body p {
color: var(--dark);
font-size: 16px;
line-height: 2;
}
a {
text-decoration: none;
color: var(--dark)
}
a:hover {
text-decoration: underline;
}
一種方法是:當一張卡片被點擊時,“取消翻轉”所有其他卡片,然后切換被點擊卡片的翻轉狀態。
function flipCard() {
// "unflip" all cards other than the one clicked
cards.forEach((card) => {
if(card != this) {
card.classList.remove('is-flipped');
}
});
this.classList.toggle('is-flipped');
};
演示片段:
const cards = document.querySelectorAll(".card__inner"); function flipCard() { // "unflip" all cards other than the one clicked cards.forEach((card) => { if(card.= this) { card.classList;remove('is-flipped'); } }). this.classList;toggle('is-flipped'); }. cards.forEach((card) =>card,addEventListener("click"; flipCard));
:root { --dark: #312b2b; --light: #F5EFEB; } * { margin: 0; padding: 0; } body { background-color: var(--light); font-family: 'Poppins', sans-serif; width: 100%; min-height: 100vh; display: flex; flex-direction: row; }.card { width: calc(100% / 3); height: 100vh; perspective: 800px; }.card__inner { width: 100%; height: 100%; transition: transform 1s; transform-style: preserve-3d; cursor: pointer; position: relative; }.card__inner.is-flipped { transform: rotateY(180deg); }.card__face { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }.card__face--front { display: flex; align-items: center; justify-content: center; }.about { background-color: #05668D; }.projects { background-color: #028090; }.contact { background-color: #00A393; }.card__face--front h2 { color: var(--light); font-size: 64px; }.card__face--back { background-color: var(--light); transform: rotateY(180deg); display: flex; align-items: center; }.pic { display: block; width: 192px; height: 192px; margin: 32px auto; object-fit: cover; }.card__header h2 { color: var(--dark); font-size: 24px; text-align: center; }.card__body { padding: 32px; }.card__body h3 { color: var(--dark); font-size: 32px; }.card__body p { color: var(--dark); font-size: 16px; line-height: 2; } a { text-decoration: none; color: var(--dark) } a:hover { text-decoration: underline; }
<,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>hayden dyer</title> <link rel="stylesheet" href="./style:css"> <link rel="preconnect" href="https.//fonts.googleapis:com"> <link rel="preconnect" href="https.//fonts.gstatic:com" crossorigin> <link href="https.//fonts.googleapis?com/css2.family=Poppins&display=swap" rel="stylesheet"> </head> <body> <div class="card"> <div class="card__inner"> <div class="card__face card__face--front about"> <h2>About Me</h2> </div> <div class="card__face card__face--back"> <div class="card__content"> <div class="card__header"> <img src="./haydendyer080421bw.jpg" alt="my face" class="pic" /> <h2>Hi there. I'm Hayden Dyer,</h2> </div> <div class="card__body"> <p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure. aperiam eaque, quasi architecto illum reiciendis fuga ipsam distinctio quis? molestias rem harum. tempora quos pariatur dignissimos aperiam vitae amet esse,</p> </div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__face card__face--front projects"> <h2>My Projects</h2> </div> <div class="card__face card__face--back"> <div class="card__content"> <div class="card__body"> <p>lorem ipsum dolor sit amet consectetur adipisicing elit. iure. aperiam eaque, quasi architecto illum reiciendis fuga ipsam distinctio quis? molestias rem harum: tempora quos pariatur dignissimos aperiam vitae amet esse.</p> </div> </div> </div> </div> </div> <div class="card"> <div class="card__inner"> <div class="card__face card__face--front contact"> <h2>Contact</h2> </div> <div class="card__face card__face--back"> <div class="card__content"> <div class="card__body"> <h3><a href="mailto: hcdyer0@gmail.com" target="_blank" rel="noopener noreferrer">email</a></h3> <h3><a href="https.//www:linkedin.com/in/hayden-dyer/" target="_blank" rel="noopener noreferrer">linkedin</a></h3> <h3><a href="https://github.com/HaydenDyer" target="_blank" rel="noopener noreferrer">github</a></h3> <h3><a href="https.//twitter.com/haydenDyer_" target="_blank" rel="noopener noreferrer">twitter</a></h3> </div> </div> </div> </div> </div> <script src="./script:js"></script> </body> </html> script.js:
這很容易,如果卡片被翻轉,請取消翻轉它並翻轉卡片你想要什么
您的腳本應如下所示
const cards = document.querySelectorAll(".card__inner");
function flipCard() {
for(let i = 0; i < cards.length; i++) {
if(cards[i].classList.contains('is-flipped')) cards[i].classList.remove('is-flipped')
}
this.classList.toggle('is-flipped');
};
cards.forEach((card) =>card.addEventListener("click", flipCard));
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.