本申請(qǐng)屬于通用前端，尤其涉及一種實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法及相關(guān)裝置。

背景技術(shù)：

1、跑馬燈(marquee)是一種在顯示屏或網(wǎng)頁(yè)上以水平滾動(dòng)方式顯示文本或圖像的效果。跑馬燈作為一種吸引人眼球的效果，在前端設(shè)計(jì)中被廣泛運(yùn)用，可以用于多種場(chǎng)景下的信息展示、宣傳推廣和提醒等用途。

2、而在前端開(kāi)發(fā)中，跑馬燈效果通常通過(guò)javascript定時(shí)器來(lái)實(shí)現(xiàn)，實(shí)現(xiàn)方法相對(duì)復(fù)雜一些，需要通過(guò)javascript定時(shí)器控制文本的滾動(dòng)，性能上也會(huì)差一點(diǎn)，也可通過(guò)使用第三方庫(kù)來(lái)實(shí)現(xiàn)，但是會(huì)增加項(xiàng)目依賴，影響性能和文件大小，需要根據(jù)具體需求選擇合適的庫(kù)。

技術(shù)實(shí)現(xiàn)思路

1、有鑒于此，本申請(qǐng)旨在提出一種實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法及相關(guān)裝置，以解決需要通過(guò)使用第三方庫(kù)來(lái)實(shí)現(xiàn)跑馬燈滾動(dòng)顯示，導(dǎo)致增加項(xiàng)目依賴，影響性能和文件大小的問(wèn)題。

2、為達(dá)到上述目的，本申請(qǐng)的技術(shù)方案是這樣實(shí)現(xiàn)的：

3、第一方面，本申請(qǐng)?zhí)峁┝艘环N實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法，包括：

4、構(gòu)建名為marquee.vue的vue組件，并分別創(chuàng)建包含有container?div、wrapperdiv和text?div的html元素；其中，container?div用以動(dòng)態(tài)設(shè)置寬度，并隱藏多余內(nèi)容；wrapper?div用以動(dòng)態(tài)設(shè)置動(dòng)畫(huà)執(zhí)行時(shí)間；text?div用以動(dòng)態(tài)設(shè)置顯示的文本；

5、創(chuàng)建css關(guān)鍵幀動(dòng)畫(huà)marquee，定義文本在動(dòng)畫(huà)過(guò)程中的移動(dòng)，將動(dòng)畫(huà)應(yīng)用到wrapper元素上，并設(shè)置動(dòng)畫(huà)為線性無(wú)限循環(huán)；其中，定義文本從上到下垂直落入至容器指定位置后，從右向左水平移動(dòng)；

6、獲取text并設(shè)置待展示的文本內(nèi)容，獲取width并設(shè)置container?div的容器寬度，獲取duration設(shè)置關(guān)鍵幀動(dòng)畫(huà)marquee單次執(zhí)行的時(shí)間；

7、渲染頁(yè)面，以使關(guān)鍵幀動(dòng)畫(huà)滾動(dòng)顯示。

8、進(jìn)一步地，通過(guò)javascript鉤子動(dòng)態(tài)調(diào)整container的寬度、關(guān)鍵幀動(dòng)畫(huà)marquee單次執(zhí)行的時(shí)間和動(dòng)態(tài)獲取并設(shè)置顯示的文本。

9、進(jìn)一步地，定義文本從上到下垂直落入至容器指定位置包括：

10、添加關(guān)鍵幀動(dòng)畫(huà)，沿頂部位置-100％滾動(dòng)至頂部位置0。

11、進(jìn)一步地，定義文本從右向左水平移動(dòng)，包括：

12、落入至容器中央位置的關(guān)鍵幀動(dòng)畫(huà)，沿x方向從容器中央位置100％滾動(dòng)到左側(cè)位置-100％。

13、第二方面，基于同一發(fā)明構(gòu)思，本申請(qǐng)還提供了一種實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的裝置，包括：

14、創(chuàng)建模塊，被配置為構(gòu)建名為marquee.vue的vue組件，并分別創(chuàng)建包含有container?div、wrapper?div和text?div的html元素；其中，container?div用以動(dòng)態(tài)設(shè)置寬度，并隱藏多余內(nèi)容；wrapper?div用以動(dòng)態(tài)設(shè)置動(dòng)畫(huà)執(zhí)行時(shí)間；text?div用以動(dòng)態(tài)設(shè)置顯示的文本；

15、定義模塊，被配置為創(chuàng)建css關(guān)鍵幀動(dòng)畫(huà)marquee，定義文本在動(dòng)畫(huà)過(guò)程中的移動(dòng)，將動(dòng)畫(huà)應(yīng)用到wrapper元素上，并設(shè)置動(dòng)畫(huà)為線性無(wú)限循環(huán)；其中，定義文本從上到下垂直落入至容器指定位置后，從右向左水平移動(dòng)；

16、獲取模塊，被配置為獲取text并設(shè)置待展示的文本內(nèi)容，獲取width并設(shè)置container?div的容器寬度，獲取duration設(shè)置關(guān)鍵幀動(dòng)畫(huà)marquee單次執(zhí)行的時(shí)間；

17、渲染模塊，被配置為渲染頁(yè)面，以使關(guān)鍵幀動(dòng)畫(huà)滾動(dòng)顯示。

18、第三方面，基于同一發(fā)明構(gòu)思，本申請(qǐng)還提供了一種電子設(shè)備，包括存儲(chǔ)器、處理器及存儲(chǔ)在存儲(chǔ)器上并可在處理器上運(yùn)行的計(jì)算機(jī)程序，所述處理器執(zhí)行所述程序時(shí)實(shí)現(xiàn)如第一方面所述的方法。

19、第四方面，基于同一發(fā)明構(gòu)思，本申請(qǐng)還提供了一種非暫態(tài)計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其中，所述非暫態(tài)計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)存儲(chǔ)計(jì)算機(jī)指令，所述計(jì)算機(jī)指令用于使所述計(jì)算機(jī)執(zhí)行如第一方面所述的方法。

20、相對(duì)于現(xiàn)有技術(shù)，本申請(qǐng)所述的實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法及相關(guān)裝置具有以下有益效果：

21、本申請(qǐng)所述的實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法及相關(guān)裝置，該方法無(wú)需編寫(xiě)復(fù)雜的javascript邏輯或依賴第三方庫(kù)，只需使用css屬性和關(guān)鍵幀動(dòng)畫(huà)，就可以在標(biāo)準(zhǔn)的html/css環(huán)境中實(shí)現(xiàn)跑馬燈效果。這樣可以避免引入額外的文件和網(wǎng)絡(luò)請(qǐng)求，降低了開(kāi)發(fā)的難度和復(fù)雜性，減少項(xiàng)目依賴和維護(hù)成本，該方法在性能方面具有優(yōu)勢(shì)，在現(xiàn)代瀏覽器中進(jìn)行硬件加速，提供流暢的動(dòng)畫(huà)效果。

技術(shù)特征：

1.一種實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法，其特征在于，包括：

2.根據(jù)權(quán)利要求1所述的方法，其特征在于：

3.根據(jù)權(quán)利要求1所述的方法，其特征在于，定義文本從上到下垂直落入至容器指定位置包括：

4.根據(jù)權(quán)利要求3所述的方法，其特征在于，定義文本從右向左水平移動(dòng)，包括：

5.一種實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的裝置，其特征在于，包括：

6.一種電子設(shè)備，包括存儲(chǔ)器、處理器及存儲(chǔ)在存儲(chǔ)器上并可在處理器上運(yùn)行的計(jì)算機(jī)程序，其特征在于，所述處理器執(zhí)行所述程序時(shí)實(shí)現(xiàn)權(quán)利要求1-4任一項(xiàng)所述的方法。

7.一種非暫態(tài)計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，其中，所述非暫態(tài)計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)存儲(chǔ)計(jì)算機(jī)指令，所述計(jì)算機(jī)指令用于使計(jì)算機(jī)執(zhí)行權(quán)利要求1-4任一項(xiàng)所述的方法。

技術(shù)總結(jié)
本申請(qǐng)?zhí)峁┝艘环N實(shí)現(xiàn)跑馬燈滾動(dòng)顯示的方法及相關(guān)裝置，包括：構(gòu)建名為marquee.vue的vue組件，并分別創(chuàng)建包含有container?div、wrapper?div和text?div的HTML元素；創(chuàng)建css關(guān)鍵幀動(dòng)畫(huà)marquee，定義文本在動(dòng)畫(huà)過(guò)程中的移動(dòng)，將動(dòng)畫(huà)應(yīng)用到wrapper元素上，并設(shè)置動(dòng)畫(huà)為線性無(wú)限循環(huán)；獲取text并設(shè)置待展示的文本內(nèi)容，獲取width并設(shè)置container?div的容器寬度，獲取duration設(shè)置關(guān)鍵幀動(dòng)畫(huà)marquee單次執(zhí)行的時(shí)間；渲染頁(yè)面。本申請(qǐng)所述的方法無(wú)需依賴額外的庫(kù)或框架，就可在標(biāo)準(zhǔn)的HTML/CSS環(huán)境中實(shí)現(xiàn)跑馬燈效果。

技術(shù)研發(fā)人員：劉魏
受保護(hù)的技術(shù)使用者：紫光云技術(shù)有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2024/12/17