堆栈内存溢出
  繁体   English   中英

切换翻转卡片

[英]Toggle flip cards

 原文  2021-11-24 20:25:51  5   2    javascript/ html/ css/ flip/ card

问题描述

我有一个简单的投资组合网站，里面有三张翻牌。 到目前为止，翻转功能就在那里，我基本上已经完成了网站。 问题是，我希望其他卡在单击一张卡时切换。 换句话说，我希望一次只能翻转一张牌。 我怎样才能做到这一点？

索引.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;
}

2 个解决方案

解决方案1
 0  2021-11-24 20:33:51

一种方法是：当一张卡片被点击时，“取消翻转”所有其他卡片，然后切换被点击卡片的翻转状态。

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:

解决方案2
 0  2021-11-24 20:39:37

这很容易，如果卡片被翻转，请取消翻转它并翻转卡片你想要什么

您的脚本应如下所示

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.

相关问题 多卡翻转 animation 切换类别以显示卡片 Javascript - 如何创建多个通过 onclick() 翻转的翻转卡片？ Static 卡在“翻转”时不会翻转 function 调用 翻转表格行内容 从代码创建翻转切换 如何按顺序按时间间隔翻转卡片？ 3D一次翻转多张卡 翻转所有卡片，但想一张一张地翻转 JS：如何让多张卡片在网站上翻转？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM