文字跑马灯：实现文字自动滚动策略的原理分析

一. 背景

在前端开发中，不少网站和应用都会运用到动态效果来吸引用户的注意，并提升用户体验。文字跑马灯是一种常见的动态效果，通过文字不断滚动来展示内容，吸引用户的注意力。

最近的一个项目就需要实现文字跑马灯效果，来向用户展示一些公告信息。具体需求是：当文本超出页面宽度时，需要文字滚动，否则不进行滚动。

其实，在 HTML 元素中，<marquee> 元素是原生的文字滚动组件，遗憾的是不支持自动判断文字宽度是否超出页面，而且该元素已弃用，官方已不再建议使用了。

因此，本篇文章通过简单的思路及原理分析，来实现文字跑马灯效果，轻松实现文字的自动按需滚动。

二. Marquee 元素

在进行自己实现文字跑马灯效果之前，我们先来看一下 HTML 元素中的<marquee> 元素。

HTML marquee 元素（<marquee>）用来插入一段滚动的文字，可以使用它的属性控制当文本超出容器时实现文字滚动效果。

注意： <marquee> 元素已经过时，官方建议不要再使用。可能一些浏览器仍然支持它，或许不久从相关的 web 标准中移除，请尽量不要使用该特性，因为可能该特性随时可能无法正常工作

虽然已经移除，我们可以学习一下<marquee>的滚动 API，借鉴一下来拓展一下思路：

简单说几个重点的 API：

  • behavior：文本在 marquee 元素内如何滚动。 scroll，slide 和 alternate。默认值为 scroll。

  • bgcolor：颜色名称或十六进制值设置背景颜色。

  • scrollamount：每次滚动时移动的长度，单位：像素。默认值为 6。

  • direction：文本滚动的方向。可选值有 left, right, up and down。默认值为 left。

  • loop：文本滚动的次数。如果未指定值，默认值为 −1，表示 marquee 将连续滚动。

  • width：宽度，单位：像素或百分比值。

  • height：高度，单位同上。

遗憾的是，我查看了它的所有 API，发现它并不支持自动判断文字宽度的操作。下面我以一个简单的例子使用 marquee 实现滚动效果：

<marquee loop="-1" behavior="scroll" direction="left" width="200" bgcolor="red">This text will scroll from right to left
</marquee>

通过以上简单的代码，marquee版的文字滚动就实现了，如下所示：

文字跑马灯1.gif

由于<marquee>元素已被官方弃用，同时也不支持配置动态滚动，更多详细内容文档参考：marquee MDN 文档

因此，接下来我们自己实现一个文字跑马灯效果。

三. 如何实现文字滚动的分析

需求分析：实现一款文字跑马灯效果，同时需要自动判断文本内容的宽度，如果超出容器宽度，则进行文本滚动显示；否则文本不进行滚动。

思路分析：

  • 判断容器的宽度和文字内容的宽度，当文字宽度大于容器宽度时，文字滚动；当文字宽度小于容器宽度时，文字不滚动。

  • 实现滚动动画，当文字超出容器时，文字由左向右的进行循环滚动。

因此实现这个组件的的重点就是以上思路分析中的要点，接下来我们看一下如何实现？

1. 第一步：判断文字是否超出容器

判断文字是否超出容器，具体操作为，判断文字的内容宽度 > 容器的宽度？而获取这两个元素的宽度可以通过以下这两个 API 来获取：

  • 获取文字的宽度：el.getBoundingClientRect().width。

  • 获取容器的宽度：el.clientWidth。

  • 当 el.getBoundingClientRect().width > el.clientWidth，则需要滚动。

说明：el.getBoundingClientRect().width 和 el.clientWidth 是用来获取元素宽度的两种属性，它们之间有一些区别，理解好这两个区别就成功了一半。

① el.getBoundingClientRect().width

el.getBoundingClientRect() 获取的是 DOM 元素相对于窗口的坐标集合，集合中有多个属性，其中的 width 属性就是相对于视口的元素的宽度。

Snipaste_2024-03-18_18-34-50.png

  • 通过调用元素的 getBoundingClientRect() 方法来获取元素相对于视口的位置信息，并返回一个包含元素位置、尺寸等属性的 DOMRect 对象。

  • width 属性表示元素的宽度，包括元素的内容、内边距和边框，但不包括外边距。它会计算元素的实际宽度，包括可能存在的滚动条。

  • 因为 width 属性是相对于视口的，所以当页面发生滚动时，元素的位置和尺寸可能会发生改变。

② el.clientWidth

获取元素可视部分的宽度通过  el.clientWidth  这个  API  来获取，如下图所示浏览器常用高度的示意图，从图中，很清晰的可以看到clientWidth指示。

Snipaste_2024-03-18_18-34-18.png

  • 通过调用元素的 clientWidth 方法用来获取元素的内容宽度，包括内边距，但是不包括边框和外边距。

  • clientWidth 通常用来获取元素可视部分的宽度，即不包括滚动条和隐藏部分的宽度。

  • clientWidth 不会受到页面滚动的影响，它表示的是元素在不考虑滚动的情况下的宽度。

综上所述，el.getBoundingClientRect().width 返回的是元素相对于视口的位置和尺寸信息中的宽度，包含了内边距和边框，并可能受到滚动的影响；而 el.clientWidth 获取的是元素内容部分的宽度，不包括内边距和边框，也不受滚动的影响。

因此根据具体的需求，获取文字的宽度使用的是el.getBoundingClientRect().width，而获取容器的宽度使用的是el.clientWidth。

<div class="marquee-container"><div class="marquee-text">这是一段需要滚动显示的文本内容～</div>
</div>

2. 第二步：滚动的动画实现

要实现文字从左到右依次滚动的效果，关键在于下面两点：

  • 设置父级容器的样式，当文字超出时，藏超出容器宽度的部分

  • 动画 animation 的实现，通过 @keyframes 实现一个从左到右滚动的动画效果

示例代码如下所示：

<div class="scroll-container"><span class="scroll-text">这里是需要滚动的文本内容</span>
</div>
<style>.scroll-container {width: 100%;overflow: hidden;}.scroll-text {white-space: nowrap;animation: scrollRight 5s linear infinite;display: inline-block;}@keyframes scrollRight {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}
</style>

在上面的 CSS 样式中：

  • scroll-container 元素设置了 overflow: hidden;，用来隐藏超出容器宽度的部分。

  • scroll-text 元素使用 white-space: nowrap; 来防止文字换行，display: inline-block; 让文本水平排列。

  • animation 属性定义了一个名为 scrollRight 的动画，持续时间为 5 秒，线性匀速运动，无限循环。

  • @keyframes 定义了一个从左到右滚动的动画效果：从初始位置（translateX(0)）到 -100% 的水平偏移，实现文字从左到右滚动。

在必要时，也可以使用 JavaScript 控制动画的开始、暂停和重新开始。例如，可以通过 JavaScript 动态添加或移除动画类名来控制滚动效果的启停。

const scrollText = document.querySelector(".scroll-text");// 暂停滚动
function pauseScroll() {scrollText.style.animationPlayState = "paused";
}// 重新开始滚动
function resumeScroll() {scrollText.style.animationPlayState = "running";
}

通过上述代码的编写，即可实现文字从左到右依次滚动的效果。当页面加载时，文字将开始滚动；在需要暂停或重新开始时，可通过 JavaScript 来实现相应的操作。

文字跑马灯3.gif

四. 完整示例分析

1. 基本实现原理分析

  1. 首先通过 JavaScript 获取文本容器和文本内容元素。

  2. 判断文本内容的宽度是否超出容器的宽度，如果超出则添加滚动样式，否则移除滚动样式。

  3. CSS 样式定义了一个 marquee 动画，使文本内容在容器内水平滚动显示。动画从右侧向左侧滚动，持续时间为 5 秒，速度线性，无限循环。

  4. 添加 white-space: nowrap; 样式确保文本内容不换行，实现水平滚动效果。

  5. 使用 overflow: hidden; 样式来隐藏超出容器的文本内容，实现跑马灯效果。

2. HTML 结构

<div class="marquee-container"><div class="marquee-text">这是一段需要滚动显示的文本内容～</div>
</div>

3. CSS 样式

.marquee-container {width: 200px; /* 容器宽度 */overflow: hidden; /* 内容超出时隐藏 */
}.marquee-text {white-space: nowrap; /* 内容不换行 */display: inline-block;
}.marquee-text-animation {animation: marquee 5s linear infinite; /* 滚动动画，时间可根据需要调整 */
}@keyframes marquee {0% {transform: translateX(100%);}100% {transform: translateX(-100%);}
}

4. JavaScript 实现

// 获取文本容器和文本内容元素
const container = document.querySelector(".marquee-container");
const text = document.querySelector(".marquee-text");// 判断文本内容是否超出容器宽度
if (text.getBoundingClientRect().width > container.clientWidth) {text.classList.add("marquee-text-animation"); // 添加滚动样式
} else {text.classList.remove("marquee-text-animation"); // 移除滚动样式
}

通过以上实现原理和示例代码，可以实现一个简单的文字跑马灯组件，具体的演示效果如下图所示，同时你也可以根据实际需要对样式和滚动效果进行调整。

当文本内容宽度未超出容器宽度时，文本内容保持静态显示即可。

Snipaste_2024-03-19_10-00-57.png

当文本内容宽度超出容器宽度时，文本会自动滚动显示；

文字跑马灯2.gif

五. 总结

在本文中，我们详细分析了如何实现文字跑马灯效果，通过判断文字内容是否超出容器，进而实现自动滚动的功能，为网站添加了一个引人注目的动画效果。下面我来进行总结一下，实现文字滚动效果有以下几个要点：

  • 判断文字的宽度是否超出：使用el.getBoundingClientRect().width API 获取文字的宽度，使用 el.clientWidth API 获取容器的宽度，当 el.getBoundingClientRect().width > el.clientWidth，触发文字滚动。

  • 实现文字滚动动画：使用 transform 动画实现文字滚动效果。

文字跑马灯作为一种常见的动画效果，可以吸引用户的注意力。当然，本文只是在实现方式及实现原理上进行详细分析，你可以在了解这些之后对其进行更加具体的改造，比如动画效果、文字背景、上下滚动、操作暂停等等。

希望通过本文的学习，可以让你对文字跑马灯有了更深入的理解！

如果您感觉文章还不错，点个赞再走吧！

 

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

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

相关文章

Chrome谷歌浏览器禁止空格下翻页但可以暂停和播放视频脚本js

Chrome谷歌浏览器禁止空格下翻页但可以暂停和播放视频脚本js

前提 播放某些网站的视频的时候(不能网页全屏的视频) 会产生空格下翻页但是不能暂停播放视频&#xff0c;解决方案:下载油猴或者脚本猫把这代码填进去 (function() {use strict;document.body.onkeydown function(event) {var e window.event || event;// 检查是否按下空格…
阅读更多...
【消息队列】RabbitMQ实现消费者组机制

【消息队列】RabbitMQ实现消费者组机制

目录 1. RabbitMQ 的 发布订阅模式 2. GRPC 服务间的实体同步 2.1 生产者服务 2.2 消费者服务 3. 可靠性 3.1 生产者丢失消息 3.2 消费者丢失消息 3.3 RabbitMQ 中间件丢失消息 1. RabbitMQ 的 发布订阅模式 https://www.rabbitmq.com/tutorials/tutorial-three-go P 生…
阅读更多...
基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue+uniapp微信小程序的乡村政务服务系统的详细设计和实现(源码+lw+部署文档+讲解等)

项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不是配置文件。Spring Boot 通过自动化配置和约…
阅读更多...
【代码随想录Day45】动态规划Part13

【代码随想录Day45】动态规划Part13

647. 回文子串 题目链接/文章讲解&#xff1a;代码随想录 视频讲解&#xff1a;动态规划&#xff0c;字符串性质决定了 DP 数组的定义 | LeetCode&#xff1a;647.回文子串_哔哩哔哩_bilibili class Solution {public int countSubstrings(String s) {// 将字符串转换为字符数…
阅读更多...
【软件测试】JUnit

【软件测试】JUnit

Junit 是一个用于 Java 编程语言的单元测试框架&#xff0c;Selenium是自动化测试框架&#xff0c;专门用于Web测试 本篇博客介绍 Junit5 文章目录 Junit 使用语法注解参数执行顺序断言测试套件 Junit 使用 本篇博客使用 Idea集成开发环境 首先&#xff0c;创建新项目&#…
阅读更多...
从零开始实现 C++ 双向链表：深入理解链表底层原理

从零开始实现 C++ 双向链表：深入理解链表底层原理

文章目录 前言&#xff1a;1. 主要数据结构2. 迭代器的实现3. 链表的实现3.1 基本结构3.2 链表的插入与删除3.3 其他成员函数 4. 迭代器操作与遍历链表5. 拷贝构造与赋值运算符6. 总结 前言&#xff1a; 在 C 标准库中&#xff0c;std::list 是一种非常常用的数据结构&#xff…
阅读更多...
VUE 仿神州租车-开放平台

VUE 仿神州租车-开放平台

项目背景&#xff1a; 神州租车是一家提供汽车租赁服务的公司&#xff0c;其API开放平台为开发者提供了访问神州租车相关服务和数据的接口。用VUE技术来仿照其开发平台。 成果展示&#xff1a; 首页&#xff1a; API文档&#xff1a; 关于我们&#xff1a;
阅读更多...
牛只行为及种类识别数据集18g牛只数据，适用于多种图像识别，目标检测，区域入侵检测等算法作为数据集。数据集中包括牛只行走，站立，进食，饮水等不同类型的数据

牛只行为及种类识别数据集18g牛只数据，适用于多种图像识别，目标检测，区域入侵检测等算法作为数据集。数据集中包括牛只行走，站立，进食，饮水等不同类型的数据

18g牛只数据&#xff0c;适用于多种图像识别&#xff0c;目标检测&#xff0c;区域入侵检测等算法作为数据集。 数据集中包括牛只行走&#xff0c;站立&#xff0c;进食&#xff0c;饮水等不同类型的数据&#xff0c;可以用于行为检测 数据集中包含多种不同种类的牛只&#xff…
阅读更多...
黑盒测试 | 挖掘.NET程序中的反序列化漏洞

黑盒测试 | 挖掘.NET程序中的反序列化漏洞

通过不安全反序列化漏洞远程执行代码 今天&#xff0c;我将回顾 OWASP 的十大漏洞之一&#xff1a;不安全反序列化&#xff0c;重点是 .NET 应用程序上反序列化漏洞的利用。 &#x1f4dd;$ _序列化_与_反序列化 序列化是将数据对象转换为字节流的过程&#xff0c;字节流可以…
阅读更多...
从底层结构开始学习FPGA（15）----时钟结构（通俗版）

从底层结构开始学习FPGA（15）----时钟结构（通俗版）

目录 0、前言 1、IO Bank和Clock Region（时钟区域）是一个东西吗？ 2、时钟输入管脚 3、时钟架构 3.1、全局时钟BUFG 3.2、水平时钟BUFH 3.3、IO时钟BUFIO 3.4、区域时钟BUFR/BUFMR 4、总结 《从底层结构开始学习FPGA》目录与传送门 0、前言 我思来想去，总觉…
阅读更多...
基于SpringBoot+Vue+uniapp的诗词学习系统的详细设计和实现

基于SpringBoot+Vue+uniapp的诗词学习系统的详细设计和实现

详细视频演示 请联系我获取更详细的演示视频 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…
阅读更多...
Maxwell 底层原理 详解

Maxwell 底层原理 详解

Maxwell 是一个 MySQL 数据库的增量数据捕获&#xff08;CDC, Change Data Capture&#xff09;工具&#xff0c;它通过读取 MySQL 的 binlog&#xff08;Binary Log&#xff09;来捕获数据变化&#xff0c;并将这些变化实时地发送到如 Kafka、Kinesis、RabbitMQ 或其他输出端。…
阅读更多...
Java的重载和主要内存区

Java的重载和主要内存区

JAVA的重载 ​ 在Java中&#xff0c;重载&#xff08;Overloading&#xff09;是指在同一个类中可以定义多个同名的方法&#xff0c;但它们的参数列表必须不同。重载可以通过改变参数的数量、类型或者顺序来实现。重载提高了代码的可读性和灵活性。 JAVA重载要满足的条件&…
阅读更多...
面经整理 八股 虾皮购物 Java后端开发 上

面经整理 八股 虾皮购物 Java后端开发 上

目录 1.java中的锁机制 什么是可重入锁 锁机制 可重入锁&#xff08;Reentrant Lock&#xff09; 特点&#xff1a; 示例代码&#xff1a; 总结 2.可重入锁的使用场景 1. 递归调用 2. 多线程资源共享 3. 复杂对象的状态管理 4. 保证顺序执行 总结 3.讲一下AQS AQ…
阅读更多...
Lua表（Table）

Lua表（Table）

软考鸭微信小程序 过软考,来软考鸭! 提供软考免费软考讲解视频、题库、软考试题、软考模考、软考查分、软考咨询等服务 Lua中的表&#xff08;table&#xff09;是一种核心数据结构&#xff0c;它既是数组也是字典&#xff0c;能够存储多种类型的数据&#xff0c;包括数字、字符…
阅读更多...
0x3D service

0x3D service

0x3D service 1. 概念2. Request message 数据格式3. Respone message 数据格式3.1 正响应格式3.2 negative respone codes(NRC)4. 示例4.1 正响应示例：4.2 NRC 示例1. 概念 UDS（统一诊断服务）中的0x3D服务，即Write Memory By Address（按地址写内存）服务，允许客户端向服…
阅读更多...
Javaweb基础-axios

Javaweb基础-axios

Axios 是一个基于 Promise 的 HTTP 库&#xff0c;可以用在浏览器和 node.js 中。 GET方法 get请求第一种写法 //后端 Slf4j RestController RequestMapping("/demo") public class DemoController {RequestMapping("/getTest")// 被RequestParam标记的参数…
阅读更多...
mysql数据量分库分表

mysql数据量分库分表

一、分库分表参考阈值 分库分表是解决大规模数据和高并发访问问题的常用策略。虽然没有绝对的阈值来决定何时进行分库分表&#xff0c;但以下是一些参考阈值和考虑因素&#xff0c;可以帮助你做出决策&#xff1a; 1.1 数据量阈值 单表数据行数&#xff1a;当单表的数据行数…
阅读更多...
2024年中国工业大模型行业发展研究报告｜附43页PDF文件下载

2024年中国工业大模型行业发展研究报告｜附43页PDF文件下载

工业大模型伴随着大模型技术的发展&#xff0c;逐渐渗透至工业&#xff0c;处于萌芽阶段。 就大模型的本质而言&#xff0c;是由一系列参数化的数学函数组成的计算系统&#xff0c;且是一个概率模型&#xff0c;其工作机制是基于概率和统计推动进行的&#xff0c;而非真正的理解…
阅读更多...
.NET 6 API + Middleware + Audit rail

.NET 6 API + Middleware + Audit rail

Request相关的参数。 需要在Program.cs 注入IHttpContextAccessor //Below services used to get tokenservices.AddHttpContextAccessor();services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); public string GetClientIpAddress(){var clientIp _ht…
阅读更多...
最新文章

Copyright @ 2022~2023