前端 | 易混词卡片切换

文章目录

📚实现效果
📚模块实现解析
- 🐇html
- 🐇css
- 🐇javascript

📚实现效果

绘制单词卡片效果，实现点击左半部分上翻，点击右半部分下翻。

📚模块实现解析

🐇html

搭个框架

<!-- 左边 -->
<div class="count">
    <!-- 易混词 --> 
    <div id="cloudtitle">那些讨厌的<span>易混词</span></div>
    <p style="font-size: 0.9vw; color: #575656;">点击<span class="hint">左</span>半部分<span class="hint">上</span>翻，点击<span class="hint">右</span>半部分<span class="hint">下</span>翻。</p>
    <div class="flashcard-container">
        <div class="flashcard">
          <h3>compliment</h3>
          <p>n.致意，问候；赞美，称赞</p>
          <p>v.赞扬；称赞</p>
          <h3>complement</h3>
          <p>v.补充，补足，使完美</p>
          <p>n.补充物；补足物</p>
          <h3>implement</h3>
          <p>v.实施，贯彻，执行；使生效</p>
          <P>n.工具，器具；户外用具</P>
          <br>
          <h3>AI造句助记</h3>
          <p>当你成功<span>implement</span>了一项计划，你会发现它<span>complements</span>你的整体工作，而你的努力也会得到<span>compliments</span>。</p>
        </div>
    
        <div class="flashcard">
          <h3>executive</h3>
          <p>n.经理，主管，行政部门</p>
          <p>adj.执行的，行政的；高级的</p>
          <h3>exclusive</h3>
          <p>adj.独占的；高档的；排斥的</p>
          <p>adj.不包括...的</p>
          <p>n.独家新闻，独家报道</p>
          <h3>excessive</h3>
          <p>adj.过分的，过多的</p>
          <br>
          <h3>AI造句助记</h3>
          <p>这家俱乐部对于特定的高管和商界精英开放，是一个<span>exclusive</span>的社交圈子。他们在这里能够享受到奢华待遇，符合他们高<span>executive</span>级别的身份，但有时<span>excessive</span>的奢侈也让人担忧。</p>
        </div>
    </div>
</div>

新一组单词即新增一组flashcard，对应flashcard可参照下述prompt进行快速生成↓

<div class="flashcard">
	<h3>executive</h3>
	<p>n.经理，主管，行政部门</p>
	<p>adj.执行的，行政的；高级的</p>
	<h3>exclusive</h3>
	<p>adj.独占的；高档的；排斥的</p>
	<p>adj.不包括...的</p>
	<p>n.独家新闻，独家报道</p>
	<h3>excessive</h3>
	<p>adj.过分的，过多的</p>
	<br>
	<h3>AI造句助记</h3>
	<p>这家俱乐部对于特定的高管和商界精英开放，是一个<span>exclusive</span>的社交圈子。他们在这里能够享受到奢华待遇，符合他们高<span>executive</span>级别的身份，但有时<span>excessive</span>的奢侈也让人担忧。</p>
</div>

请参照上述格式，生成confess、congress、compress的对应词卡，我希望最后的AI造句是将上述四个单词按上述形式串联成一句语义连贯的话。返回↓

<div class="flashcard">
    <h3>confess</h3>
    <p>v.坦白，供认</p>
    <p>v.忏悔</p>
    <h3>congress</h3>
    <p>n.国会</p>
    <p>n.代表大会，会议</p>
    <h3>compress</h3>
    <p>v.压缩，浓缩</p>
    <p>n.紧缩</p>
    <br>
    <h3>AI造句助记</h3>
    <p>他最终不得不<span>confess</span>了自己的罪行，在国际<span>congress</span>上他公开承认了错误。为了节省空间，他需要<span>compress</span>所有的数据，在这场会议上只能说重点。</p>
</div>

🐇css

实现卡片效果（圆角 + 字体设置）

body{
    margin: 0;
    padding: 0;
    background-color: #f5f3f2;
}
.count{
    margin: 0 auto;
    /* background-color: pink; */
    /* height: 200vh; */
    position: absolute;
    left: 3%;
    top:8%;
    width: 28%;
    font-family: serif;
    font-size: 1.5vw;
    text-align: center;
}

/* 标题 */
#cloudtitle{
    margin: 0 auto;
    margin-top: 35px;
}
#cloudtitle span{
    font-size: 1.5vw;
    margin-bottom: 3px;
    font-weight: bold;
    color: #2966cf;
}
/* 易混词 */
.hint{
    font-family: 'serif';
    color: #ecbc41; 
    font-size: 1vw;
    font-weight: bold;
}
.flashcard-container {
    width: 70%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #dbedfb, #f6f9e4);
    border-radius: 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    transition: transform 0.5s ease;
}
.flashcard {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 30px;
    text-align: center;
}
.flashcard h3 {
    margin: 0;
    margin-top: 1.3vw;
    font-size: 1.3vw;
    color: #5698c3;
}
.flashcard p {
    font-size: 1.2vw;
    margin: 1.2px 0;
}
.flashcard span{
    font-size: 1.2vw;
    color: #ecbc41;
    font-weight: bold;
}

🐇javascript

实现点击翻页效果

const flashcardContainer = document.querySelector('.flashcard-container');
const flashcards = document.querySelectorAll('.flashcard');
let index = 0;
let startY;

function showCard(index) {
  flashcards.forEach((card, idx) => {
    if (idx === index) {
      card.style.display = 'flex';
    } else {
      card.style.display = 'none';
    }
  });
}

flashcardContainer.addEventListener('click', function (e) {
  const rect = flashcardContainer.getBoundingClientRect();
  const clickX = e.clientX - rect.left;
  const containerWidth = rect.width;

  if (clickX < containerWidth / 2) {
    index = (index - 1 + flashcards.length) % flashcards.length;
  } else {
    index = (index + 1) % flashcards.length;
  }
  showCard(index);
});
showCard(index);

补充滚轮翻页（但由于只适配电脑端，最后没有应用）

flashcardContainer.addEventListener('wheel', function (e) {
  if (e.target.closest('.flashcard-container') === flashcardContainer) {
    const deltaY = e.deltaY > 0 ? 1 : -1;
    index = (index + deltaY + flashcards.length) % flashcards.length;
    showCard(index);
    e.preventDefault();
  }
})