前端 | 易混词卡片切换

文章目录

  • 📚实现效果
  • 📚模块实现解析
    • 🐇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();}
    })
    
    • e.preventDefault();排除词卡滚动翻页对整体页面的干扰影响。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/691061.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

0基础理解ECC并做题-攻防世界easy-ECC理解

基点p就是最初选定的那个点 1和2都是整数集合&#xff0c;但是1/20.5就不属于整数集合 一直加&#xff0c;一直乘&#xff0c;还能保证有限个数字&#xff1f;这是因为采用了取模的运算&#xff0c;让元素始终都在有限的范围内。 如何计算分数求模&#xff1f; 设n1/2mod23,那么…

示例九、红外接收模块

通过以下几个示例来具体展开学习,了解红外接收模块原理及特性&#xff0c;学习红外接收模块的应用&#xff08;干货版&#xff09;&#xff1a; 示例九、红外接收模块 ino文件源码&#xff1a; //Arduino C demoIRrecv irrecv(4); decode_results results; unsigned long key…

Virtualbox7.0.10+Ubuntu20.04网络配置

虚拟机部署在服务器上时&#xff0c;需要进行网络配置&#xff0c;使虚拟机和服务器在同网段下&#xff0c;以保证内网的终端可以访问到虚拟机 1. 设置虚拟机 打开虚拟机设置&#xff0c;选择“网络”&#xff0c;将网卡设为桥接网卡 注&#xff1a;设置前&#xff0c;需要先…

【JVM】Class文件的格式

目录 概述 Class文件的格式 概述 Class文件是JVM的输入&#xff0c;Java虚拟机规范中定义了Class文件的结构。Class文件是JVM实现平台无关、技术无关的基础。 1:Class文件是一组以8字节为单位的字节流&#xff0c;各个数据项目按顺序紧凑排列 2:对于占用空间大于8字节的数据…

【Qt 学习笔记】Qt常用控件 | 多元素控件 | Tree Widget的说明及介绍

博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;Qt 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ Qt常用控件 | 多元素控件 | Tree Widget的说明及介绍 文章编号&#x…

直播预告-如何快乐学习亚马逊云科技AWS,玩游戏备考亚马逊云科技云从业者认证?

一边玩一边学习亚马逊云科技云技能&#xff0c;这么好的事尊的假的&#xff1f;本周六&#xff08;5约11日&#xff09;晚20点&#xff0c;亚马逊云科技UG云端夜话Night Talk活动精彩回归&#xff5e; 本次亚马逊云科技UG云端夜话直播是什么&#xff1f; 小李哥这次将在多平台…

计算机毕业设计Python地震预测系统 地震数据分析可视化 地震爬虫 大数据毕业设计 Flink Hadoop 深度学习 机器学习 人工智能 知识图谱

学生信息 姓名&#xff1a;  祁浩 题目&#xff1a; 基于Python的中国地震数据分析与可视化系统的设计与实现 学号&#xff1a; 2020135211 班级&#xff1a; 20大数据本科2班 指导教师&#xff1a; 刘思思 答辩过程 学生开题陈述 为了让学习者更好的了解了解地震…

最新巨量X-Bogus、_signature参数逆向分析与算法还原

文章目录 1. 写在前面2. 接口分析3. 断点分析4. 扣代码补环境5. 数据解密 【&#x1f3e0;作者主页】&#xff1a;吴秋霖 【&#x1f4bc;作者介绍】&#xff1a;擅长爬虫与JS加密逆向分析&#xff01;Python领域优质创作者、CSDN博客专家、阿里云博客专家、华为云享专家。一路…

Github 2024-05-12 开源项目日报 Top10

根据Github Trendings的统计,今日(2024-05-12统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量TypeScript项目5Python项目2非开发语言项目2Vue项目1Rust项目1AFFiNE: 下一代知识库 创建周期:649 天开发语言:TypeScript协议类型:OtherSta…

数据中台:企业数字化转型的桥梁_光点科技

在数字化日益深入企业核心运营的今天&#xff0c;数据中台作为一个关键的信息化架构&#xff0c;正逐渐崭露头角&#xff0c;成为连接企业各部门、优化数据管理和推动业务创新的重要桥梁。 一、数据中台&#xff1a;连接与整合的桥梁 数据中台的核心作用在于连接与整合。传统的…

SQL常用函数

一、日期相关函数 1、CURDATE() / CURRENT_DATE 返回当前日期 2、CURRENT_TIME()/CURTIME() 返回当前时间 3、CURRENT_TIMESTAMP 返回当前日期时间 4、DATE()从日期或日期时间表达式中提取日期值 5、DATEDIFF(d1,d2)计算日期 d1->d2 之间相隔的天数 6、DATE_FORMAT按表达式…

webjars学习

webjars介绍 官网&#xff1a;WebJars - Web Libraries in Jars github: WebJars GitHub 文档&#xff1a;WebJars - Documentation WebJAR 是一个用于管理Web前端依赖的工具。它允许开发者将特定的客户端库&#xff08;如JavaScript、CSS等&#xff09;打包成JAR&#xf…