实现仿ChatGPT光标跟随效果

先看效果

实现效果

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>光标闪烁效果</title><style>.text-container {position: relative;margin: 200px;padding: 30px;min-height: 300px;border: 1px solid #000;overflow: auto;}.text {position: absolute;}.cursor {position: absolute;left: 10px;top: 10px;display: inline-block;width: 20px;height: 20px;background-color: #000;border-radius: 10px;animation: cursorBlink 0.5s infinite;}/* 实现一个闪烁效果的动画 */@keyframes cursorBlink {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}</style></head><body><div class="text-container"><div class="text"></div><div class="cursor"></div></div></body><script>const textContainer = document.querySelector(".text-container");const textElement = document.querySelector(".text");const cursor = document.querySelector(".cursor");async function autoAppend() {function delay(time) {return new Promise((resolve) => setTimeout(resolve, time));}function transfer(text) {const paragraphs = text.split(" ").filter(Boolean).map((word) => `<p>${word}</p>`);return paragraphs.join("");}const content = `1.全球沟通:英文是国际通用语言,能够让你更容易与世界各地的人交流。无论是商务、旅行还是跨文化交流,具备良好的英文能力都能极大地扩展你的沟通范围。2.职业机会:许多国际公司和组织使用英文作为工作语言。掌握英文可以为你在职场上提供更广泛的职业机会,使你在全球范围内更具竞争力。3.学术研究:英文是许多学术领域的主要语言。如果你有意进行深入的学术研究或参与国际性的学术合作,良好的英文能力将是必不可少的。4.文化理解:学习英文也是一种了解英语国家文化的途径。通过阅读英文文学、观看英语电影和了解英语国家的历史,你可以更好地理解这些文化,增强跨文化交流的能力。5.个人发展:学习一门外语对大脑的发展有益。掌握英文可以提升你的思维能力、解决问题的能力以及跨学科的理解,对个人发展和学习其他技能也会产生积极的影响。`;for (let i = 0; i < content.length; i++) {let text = content.slice(0, i);let result = transfer(text);textElement.innerHTML = result;updateCursor();await delay(100);}}autoAppend();// 获取最后一节文本节点function getLastTextNode(node) {if (node.nodeType === Node.TEXT_NODE) {return node;}for (let i = node.childNodes.length - 1; i >= 0; i--) {let result = getLastTextNode(node.childNodes[i]);if (result) {return result;}}return null;}function updateCursor() {// 获取最后一个文本元素let lastTextNode = getLastTextNode(textElement);// 创建一个临时的文本节点,以便选中最后一个文字let tempText = document.createTextNode(".");if (lastTextNode) {lastTextNode.parentNode.appendChild(tempText);} else {textElement.appendChild(tempText);}// 选中最后一个文字const range = document.createRange();range.setStart(tempText, 0);range.setEnd(tempText, 0);// 这个文字是相对于浏览器const rect = range.getBoundingClientRect();const textRect = textContainer.getBoundingClientRect();const x = rect.left - textRect.left;const y = rect.top - textRect.top - 10; // 10 是光标高度的一半,为了居中显示光标cursor.style.transform = `translate(${x}px,${y}px)`;tempText.remove();}</script>
</html>

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

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

相关文章

【Java万花筒】Java脚本之舞:发现动态脚本的神奇力量

脚本大联合&#xff1a;Java生态中的动态脚本执行库详解 前言 在现代软件开发中&#xff0c;动态脚本的使用越来越受到重视。本文将深入探讨Java生态中几个重要的动态脚本执行库&#xff0c;包括Apache Groovy、ScriptEngine API、Nashorn、Kotlin Scripting和JRuby。通过对每…

网络安全需要对网络风险有独特的理解

迷失在翻译中&#xff1a;网络风险解释的脱节现实 在古印度的一个经典故事中&#xff0c;几个蒙住眼睛的人接近一头大象&#xff0c;每个人检查不同的部位。有人触摸树干&#xff0c;认为它像一条蛇。另一个摸到了一条腿&#xff0c;认为它是一棵树。还有一个拿着象牙的人&…

云平台性能测试之存储性能测试

一、认识存储磁盘IO 磁盘IO测试是指在性能测试过程中&#xff0c;对系统的磁盘读写操作进行测试和评估的过程。磁盘是计算机系统中重要的存储介质&#xff0c;对于许多应用程序来说&#xff0c;磁盘IO的性能影响着系统的整体性能。 在性能测试中&#xff0c;磁盘IO测试通常有…

高级编程,JavaScript笔记-字符串的常用方法

一、操作方法 我们也可将字符串常用的操作方法归纳为增、删、改、查&#xff0c;需要知道字符串的特点是一旦创建了&#xff0c;就不可变 增 这里增的意思并不是说直接增添内容&#xff0c;而是创建字符串的一个副本&#xff0c;再进行操作 除了常用以及${}进行字符串拼接之…

Java中打印图案最常用的25个图案程序

Java是公认的最流行的编程语言&#xff0c;因为它的简单性和多功能性。还可以使用它开发各种应用程序&#xff0c;包括Web、移动和桌面应用程序。此外&#xff0c;Java为开发人员提供了强大的工具来轻松高效地创建复杂的程序。Java最有前途的特性之一是它能够创建可以以特定格式…

《向量数据库指南》——为什么说向量数据库是更适合AI体质的“硬盘”

其“AI原生”的体质,具体表现在几个方面: 1.更高的效率。 AI算法,要从图像、音频和文本等海量的非结构化数据中学习,提取出以向量为表示形式的“特征”,以便模型能够理解和处理。因此,向量数据库比传统基于索引的数据库有明显优势。 2.更低的成本。 大模型要从一种新…

美易平台:美国阿特拉斯航空公司波音747 8型货机因发动机故障安全降落

正文&#xff1a; 据路透社报道&#xff0c;美国阿特拉斯航空公司的一架波音747 8型货机在从迈阿密国际机场起飞后不久&#xff0c;发动机出现故障&#xff0c;但幸运的是飞机成功安全降落。这一事件引起了人们对航空安全的关注。 根据航空信息网站Flightaware的数据显示&…

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器(超详细!)

【stm32】hal库学习笔记-GPIO按键控制LED和蜂鸣器 注&#xff1a;本学习笔记基于stm32f4系列 使用的开发板为正点原子stmf407ZGT6探索者开发板 GPIO引脚使用时&#xff0c;可输入或输出数字信号 例如: 检测按键输入信号&#xff08;Read_Pin&#xff09;输出信号&#xff08;W…

敏捷开发之开发流程

敏捷开发流程 一、迭代周期 我们团队的迭代周期一般是2周&#xff0c;如果研发评估时间过长的话也会将周期延长至一个月&#xff0c;但是大多数我们是2周的迭代周期。 这里说的2周是研发开始coding、提测、测试、上线&#xff0c;也就是说2周以后要上线相应的能力。并不包括…

flink operator 拉取阿里云私有镜像(其他私有类似)

创建 k8s secret kubectl --namespace flink create secret docker-registry aliyun-docker-registry --docker-serverregistry.cn-shenzhen.aliyuncs.com --docker-usernameops_acr1060896234 --docker-passwordpasswd --docker-emailDOCKER_EMAIL注意命名空间指定你使用的 我…

从0开始python学习-50.pytest之多接口用例封装

1. yaml用例设计--一个yaml中多个用例&#xff0c;且互相存在关联关系 - # 第一个用例request:method: posturl: http://192.168.0.1:8010/apijson:accounts: adminpwd: 123type: usernameheaders:Content-Type: application/json- # 第二个用例request:method: posturl: http:…

Linux:多线程

目录 1.线程的概念 1.1线程的理解 1.2进程的理解 1.3线程如何看待进程内部的资源? 1.4进程 VS 线程 2.线程的控制 2.1线程的创建 2.2线程的等待 2.3线程的终止 2.4线程ID 2.5线程的分离 3.线程的互斥与同步 3.1相关概念 3.2互斥锁 3.2.1概念理解 3.2.2操作理解…

分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测

分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测 目录 分类预测 | Matlab实现WOA(海象)-XGboost分类【24年新算法】基于海象优化算法(WOA)优化XGBoost的数据分类预测分类效果基本描述程序设计参考资料 分类效果 基本…

js控制浏览器前进、后退、页面跳转

在JavaScript中&#xff0c;你可以使用 window 对象的 history 对象来控制浏览器的历史记录。以下是一些常用的方法&#xff1a; 前进和后退&#xff1a; window.history.forward(): 前进到历史记录中的下一个页面。window.history.back(): 返回历史记录中的上一个页面。window…

模型的召回率(Recall)

召回率&#xff08;Recall&#xff09;&#xff0c;也称为灵敏度&#xff08;Sensitivity&#xff09;或真正例率&#xff08;True Positive Rate&#xff09;&#xff0c;是用于评估二分类模型性能的指标之一。召回率衡量了模型正确识别正例的能力&#xff0c;即在所有实际正例…

ctfshow php特性(web89-web101)

目录 web89 web90 web91 web92 web93 web94 web95 web96 web97 web98 web99 web100 web101 php特性(php基础知识) web89 <?php include("flag.php"); highlight_file(_FILE_);if(isset($_GET[num])){$num$_GET[num];if(preg_match("/[0-9]/&…

Debezium发布历史77

原文地址&#xff1a; https://debezium.io/blog/2019/12/13/externalized-secrets/ 欢迎关注留言&#xff0c;我是收集整理小能手&#xff0c;工具翻译&#xff0c;仅供参考&#xff0c;笔芯笔芯. 使用 Debezium 连接器实现秘密外部化 十二月 13, 2019 作者&#xff1a; Jir…

Docker项目部署()

1.创建文件夹tools mkdir tools 配置阿里云 Docker Yum 源 : yum install - y yum - utils device - mapper - persistent - data lvm2 yum - config - manager -- add - repo http://mirrors.aliyun.com/docker- ce/linux/centos/docker - ce.repo 更新 yum 缓存 yum makec…

【机器学习理论】2023 Spring Homework 1

Please login to Gradescope via your CUHK account and use the entry code: 6ZWGYD Problem 1 (Gaussian Distribution as an Exponential Family): We showed Gaussian distribution N ( μ , σ 2 ) \mathcal{N}\left(\mu, \sigma^{2}\right) N

军事课堂MR情景仿真实训教学

一、课堂应用场景 1、战术模拟&#xff1a;MR系统可以模拟各种战场环境&#xff0c;让学生在实际操作中了解和掌握各种战术技巧。通过模拟实战场景&#xff0c;学生可以在短时间内获得丰富的实战经验&#xff0c;提高他们的应变能力和团队协作能力。 2、武器操作训练&#xf…