Method for realizing scrolling display of marquee and related device

Abstract

The invention provides a method and a related device for realizing scrolling display of a marquee, and the method comprises the following steps: constructing a vue component with the name of marquee. Vue, and respectively creating HTML (Hypertext Markup Language) elements containing a controller div, a puller div and a text div; creating a css key frame animation marker, defining the movement of the text in the animation process, applying the animation to a puller element, and setting the animation as a linear infinite loop; the method comprises the following steps: acquiring text, setting a text content to be displayed, acquiring width, setting a container width of a controller div, and acquiring time for setting single execution of a key frame animation marque by use of daughter; and rendering the page. According to the method, the horse race lamp effect can be achieved in the standard HTML / CSS environment without depending on an additional library or framework.

Description

Technical Field

[0001] The present application belongs to the field of general front-end technology, and in particular, relates to a method and related device for realizing a scrolling display of a marquee. Background Art

[0002] Marquee is an effect that displays text or images in a horizontal scrolling manner on a display screen or web page. As an eye-catching effect, marquee is widely used in front-end design and can be used for information display, promotion and reminder in various scenarios.

[0003] In front-end development, the marquee effect is usually implemented through JavaScript timers. The implementation method is relatively complicated and requires JavaScript timers to control the scrolling of text. The performance will also be slightly worse. It can also be implemented by using third-party libraries, but it will increase project dependencies, affect performance and file size, and you need to choose a suitable library based on specific needs. Summary of the invention

[0004] In view of this, the present application aims to propose a method and related device for realizing scrolling display of a marquee, so as to solve the problem that scrolling display of a marquee needs to be realized by using a third-party library, which increases project dependencies and affects performance and file size.

[0005] To achieve the above purpose, the technical solution of this application is implemented as follows:

[0006] In a first aspect, the present application provides a method for implementing a scrolling display of a marquee, comprising:

[0007] Build a Vue component named marquee.vue, and create HTML elements including container div, wrapper div and text div respectively; container div is used to dynamically set the width and hide redundant content; wrapper div is used to dynamically set the animation execution time; text div is used to dynamically set the displayed text;

[0008] Create a CSS keyframe animation marquee, define the movement of the text during the animation, apply the animation to the wrapper element, and set the animation to a linear infinite loop; define the text to fall vertically from top to bottom to the specified position of the container, and then move horizontally from right to left;

[0009] Get text and set the text content to be displayed, get width and set the container width of the container div, get duration and set the single execution time of the keyframe animation marquee;

[0010] Render the page so that the keyframe animation scrolls.

[0011] Furthermore, the width of the container, the time for a single execution of the keyframe animation marquee, and the displayed text are dynamically adjusted through JavaScript hooks.

[0012] Further, defining the text to fall vertically from top to bottom into a specified position of the container includes:

[0013] Add a keyframe animation to scroll from top position -100% to top position 0.

[0014] Furthermore, the text is defined to move horizontally from right to left, including:

[0015] A keyframe animation that falls into the center of the container, scrolling from the center of the container 100% to the left side -100% in the X direction.

[0016] In the second aspect, based on the same inventive concept, the present application also provides a device for realizing scrolling display of a marquee, comprising:

[0017] Create a module, which is configured to build a Vue component named marquee.vue, and create HTML elements containing container div, wrapper div and text div respectively; container div is used to dynamically set the width and hide redundant content; wrapper div is used to dynamically set the animation execution time; text div is used to dynamically set the displayed text;

[0018] The definition module is configured to create a CSS keyframe animation marquee, define the movement of the text during the animation, apply the animation to the wrapper element, and set the animation to a linear infinite loop; wherein, the text is defined to fall vertically from top to bottom to the specified position of the container, and then move horizontally from right to left;

[0019] The acquisition module is configured to obtain text and set the text content to be displayed, obtain width and set the container width of the container div, and obtain duration to set the single execution time of the key frame animation marquee;

[0020] The rendering module is configured to render the page so that the key frame animation is scrolled and displayed.

[0021] In a third aspect, based on the same inventive concept, the present application also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in the first aspect is implemented.

[0022] In a fourth aspect, based on the same inventive concept, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect.

[0023] Compared with the prior art, the method and related device for realizing scrolling display of a marquee described in the present application have the following beneficial effects:

[0024] The method and related device for realizing scrolling display of a marquee described in the present application do not need to write complex JavaScript logic or rely on third-party libraries. Instead, the method can realize the marquee effect in a standard HTML / CSS environment by using CSS properties and keyframe animations. This can avoid introducing additional files and network requests, reduce the difficulty and complexity of development, and reduce project dependencies and maintenance costs. The method has advantages in performance, performs hardware acceleration in modern browsers, and provides smooth animation effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0026] Figure 1 A flow chart of a method for realizing scrolling display of a marquee according to an embodiment of the present application;

[0027] Figure 2 This is a schematic diagram of the structure of a device for realizing a scrolling display of a marquee according to an embodiment of the present application;

[0028] Figure 3 This is a schematic diagram of the hardware structure of the electronic device described in the embodiment of the present application. DETAILED DESCRIPTION

[0029] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.

[0030] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should be the usual meanings understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in the embodiments of the present application do not represent any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing in front of the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.

[0031] The embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0032] See also Figure 1 As shown, this embodiment provides a method for realizing a scrolling display of a marquee, which specifically includes the following steps:

[0033] Step S101, construct a Vue component named marquee.vue, and create HTML elements including container div, wrapper div and text div respectively; wherein, container div is used to dynamically set the width and hide redundant content; wrapper div is used to dynamically set the animation execution time; text div is used to dynamically set the displayed text;

[0034] Specifically, in this embodiment, a marquee.vue file is created, which contains three main parts: <template> 、 <script>、<style>；其中，<template>用于编写Vue模板，以创建DOM结构；<script>用于设置组件的数据和生命周期钩子；<style>用于编写CSS样式，包括关键帧动画和动画应用。

[0035] 编写HTML部分：

[0036] 在<template>中，创建一个container，并设置overflow:hidden，支持动态宽度设置，并隐藏溢出的内容；

[0037] 在Vue的模板中定义container div，使用：style绑定来动态设置宽度，并确保设置overflow为hidden。

[0038] 创建一个wrapper，支持动态设置动画执行时间animation Duration，在wrapper div中使用：style绑定来动态控制CSS动画的持续时间。通过接收一个prop或data属性来控制动画时间，通过动态设置这个时间，可以控制动画的快慢，例如，一个滚动文字的动画可以设置快速滚过或慢慢移动。

[0039] 创建一个text，支持动态设置text显示文本，通过使用{{text}}插值表达式，将文本内容绑定到一个动态的Vue data属性或prop。

[0040] 步骤S102、创建css关键帧动画marquee，定义文本在动画过程中的移动，将动画应用到wrapper元素上，并设置动画为线性无限循环；其中，定义文本从上到下垂直落入至容器指定位置后，从右向左水平移动；

[0041] 具体地，在本实施例中，创建marquee关键帧动画，定义文本在动画过程中的移动，将动画应用到wrapper元素上，并设置动画为线性无限循环，通过JavaScript钩子动态调整container的宽度，通过JavaScript钩子动态调整关键帧动画marquee单次执行的时间，通过JavaScript钩子动态获取并设置需要展示的文本。

[0042] 进一步来讲，对于从上到下垂直落入至容置指定位置，包括：

[0043] 添加关键帧动画，沿顶部位置-100％滚动至顶部位置0。

[0044] 0％状态(动画起始状态):动画处于容器(视窗)的顶部之外，通常设置为transform:translateY(-100％)。这意味着元素的顶部位于视窗顶部的正上方，刚好不可见。

[0045] 100％状态(动画结束状态):动画移动到视窗内的指定位置，一般设置为transform:translateY(0)，这使得动画位于其在视窗的指定位置。

[0046] 定义文本从右向左水平移动，包括：

[0047] 落入至容器指定位置的关键帧动画，沿X方向从容器左侧位置0滚动到左侧位置-100％。

[0048] 对于从右向左滚动，包括：

[0049] 0％状态(动画起始状态):元素设置为transform:translateX(0)，意味着动画到达视窗的指定位置，即其初始位置在屏幕可见区域。

[0050] 100％状态(动画结束状态):元素设置为transform:translateX(-100％)，意味着动画将移动到视窗左侧外部，即其结束位置在屏幕可见区域的左边界之外。

[0051] 将关键帧动画marquee设置给wrapper div，并设置动画为线性linear，无限infinite执行。

[0052] 步骤S103、获取text并设置待展示的文本内容，获取width并设置container div的容器宽度，获取duration设置关键帧动画marquee单次执行的时间。

[0053] 具体地，本实施例使用props来获取外部传递的数据，如容器宽度(width)、关键帧动画的持续时间(duration)和要显示的文本(text)。这些props允许父组件向子组件传递数据，使得子组件在使用时更加灵活和可配置。

[0054] 本申请通过设置width、text、duration，可以轻松调整跑马灯的样式、速度、动画效果等，使跑马灯可适用于不同的设计风格和布局需求。

[0055] 步骤S104、渲染页面，以使关键帧动画滚动显示。

[0056] 在显示屏或网页中渲染并展示关键帧动画，以使文本或内容以滚动的形式显示。

[0057] 本申请所述的方法无需编写复杂的JavaScript逻辑或依赖第三方库，只需使用CSS属性和关键帧动画，就可以在标准的HTML / CSS环境中实现跑马灯效果。这样可以避免引入额外的文件和网络请求，降低了开发的难度和复杂性，减少项目依赖和维护成本，该方法在性能方面具有优势，在现代浏览器中进行硬件加速，提供流畅的动画效果。

[0058] 需要说明的是，上述对本申请的一些实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于上述实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

[0059] 基于同一发明构思，与上述任意实施例方法相对应的，本申请的实施例还提供了一种实现跑马灯滚动显示的装置。

[0060] 如图2所示，所述实现跑马灯滚动显示的装置，包括：

[0061] 创建模块11，被配置为构建名为marquee.vue的vue组件，并分别创建包含有container div、wrapper div和text div的HTML元素；其中，container div用以动态设置宽度，并隐藏多余内容；wrapper div用以动态设置动画执行时间；text div用以动态设置显示的文本；

[0062] 定义模块12，被配置为创建css关键帧动画marquee，定义文本在动画过程中的移动，将动画应用到wrapper元素上，并设置动画为线性无限循环；其中，定义文本从上到下垂直落入至容器指定位置后，从右向左水平移动；

[0063] 获取模块13，被配置为获取text并设置待展示的文本内容，获取width并设置container div的容器宽度，获取duration设置关键帧动画marquee单次执行的时间；

[0064] 渲染模块14，被配置为渲染页面，以使关键帧动画滚动显示。

[0065] 为了描述的方便，描述以上装置时以功能分为各种模块分别描述。当然，在实施本申请的实施例时可以把各模块的功能在同一个或多个软件和 / 或硬件中实现。

[0066] 上述实施例的装置用于实现前述任一实施例中相应的方法，并且具有相应的方法实施例的有益效果，在此不再赘述。

[0067] 基于同一发明构思，与上述任意实施例方法相对应的，本申请的实施例还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如上任意一实施例所述的方法。

[0068] 图3示出了本实施例所提供的一种更为具体的电子设备硬件结构示意图，该设备可以包括：处理器1010、存储器1020、输入 / 输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入 / 输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。

[0069] 处理器1010可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本说明书实施例所提供的技术方案。

[0070] 存储器1020可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序，在通过软件或者固件来实现本说明书实施例所提供的技术方案时，相关的程序代码保存在存储器1020中，并由处理器1010来调用执行。

[0071] 输入 / 输出接口1030用于连接输入 / 输出模块，以实现信息输入及输出。输入 / 输出模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。

[0072] 通信接口1040用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。

[0073] 总线1050包括一通路，在设备的各个组件(例如处理器1010、存储器1020、输入 / 输出接口1030和通信接口1040)之间传输信息。

[0074] 需要说明的是，尽管上述设备仅示出了处理器1010、存储器1020、输入 / 输出接口1030、通信接口1040以及总线1050，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本说明书实施例方案所必需的组件，而不必包含图中所示的全部组件。

[0075] 上述实施例的电子设备用于实现前述任一实施例中相应的方法，并且具有相应的方法实施例的有益效果，在此不再赘述。

[0076] 基于同一发明构思，与上述任意实施例方法相对应的，本申请还提供了一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令用于使所述计算机执行如上任一实施例所述的方法。

[0077] 本实施例的计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

[0078] 上述实施例的存储介质存储的计算机指令用于使所述计算机执行如上任一实施例所述的方法，并且具有相应的方法实施例的有益效果，在此不再赘述。

[0079] 所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本申请的范围(包括权利要求)被限于这些例子；在本申请的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，步骤可以以任意顺序实现，并存在如上所述的本申请实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。

[0080] 另外，为简化说明和讨论，并且为了不会使本申请实施例难以理解，在所提供的附图中可以示出或可以不示出与集成电路(IC)芯片和其它部件的公知的电源 / 接地连接。此外，可以以框图的形式示出装置，以便避免使本申请实施例难以理解，并且这也考虑了以下事实，即关于这些框图装置的实施方式的细节是高度取决于将要实施本申请实施例的平台的(即，这些细节应当完全处于本领域技术人员的理解范围内)。在阐述了具体细节(例如，电路)以描述本申请的示例性实施例的情况下，对本领域技术人员来说显而易见的是，可以在没有这些具体细节的情况下或者这些具体细节有变化的情况下实施本申请实施例。因此，这些描述应被认为是说明性的而不是限制性的。

[0081] 尽管已经结合了本申请的具体实施例对本申请进行了描述，但是根据前面的描述，这些实施例的很多替换、修改和变型对本领域普通技术人员来说将是显而易见的。例如，其它存储器架构(例如，动态RAM(DRAM))可以使用所讨论的实施例。

[0082] 本申请实施例旨在涵盖落入所附权利要求的宽泛范围之内的所有这样的替换、修改和变型。因此，凡在本申请实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本申请的保护范围之内。< / script> < / template>

Claims

1. A method for realizing scrolling display of a marquee, characterized in that: include: Build a Vue component named marquee.vue, and create HTML elements including container div, wrapper div and text div respectively; container div is used to dynamically set the width and hide redundant content; wrapper div is used to dynamically set the animation execution time; text div is used to dynamically set the displayed text; Create a CSS keyframe animation marquee, define the movement of the text during the animation, apply the animation to the wrapper element, and set the animation to a linear infinite loop; define the text to fall vertically from top to bottom to the specified position of the container, and then move horizontally from right to left; Get text and set the text content to be displayed, get width and set the container width of the container div, get duration and set the single execution time of the keyframe animation marquee; Render the page so that the keyframe animation scrolls.

2. The method according to claim 1, characterized in that: Use JavaScript hooks to dynamically adjust the width of the container, the duration of a single keyframe animation marquee execution, and dynamically obtain and set the displayed text.

3. The method according to claim 1, characterized in that Defining text to fall vertically from top to bottom into the specified position of the container includes: Add a keyframe animation to scroll from top position -100% to top position 0.

4. The method according to claim 3, characterized in that Defines the text to move horizontally from right to left, including: A keyframe animation that falls into the specified position of the container, scrolling from the left position of the container 0 to the left position -100% along the X direction.

5. A device for realizing scrolling display of a marquee, characterized in that: include: Create a module, which is configured to build a Vue component named marquee.vue, and create HTML elements containing containerdiv, wrapperdiv and textdiv respectively; containerdiv is used to dynamically set the width and hide redundant content; wrapperdiv is used to dynamically set the animation execution time; textdiv is used to dynamically set the displayed text; The definition module is configured to create a CSS keyframe animation marquee, define the movement of the text during the animation, apply the animation to the wrapper element, and set the animation to a linear infinite loop; wherein, the text is defined to fall vertically from top to bottom to the specified position of the container, and then move horizontally from right to left; The acquisition module is configured to obtain text and set the text content to be displayed, obtain width and set the container width of containerdiv, and obtain duration to set the single execution time of the key frame animation marquee; The rendering module is configured to render the page so that the key frame animation is scrolled and displayed.

6. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 4 is implemented.

7. A non-transitory computer-readable storage medium, characterized in that: in, The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 4.

Images