一区二区三区中文国产亚洲_另类视频区第一页_日韩精品免费视频_女人免费视频_国产综合精品久久亚洲

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > 十行代碼實(shí)現(xiàn)網(wǎng)頁標(biāo)題滾動(dòng)效果

十行代碼實(shí)現(xiàn)網(wǎng)頁標(biāo)題滾動(dòng)效果

來源:千鋒教育
發(fā)布人:小千
時(shí)間: 2020-12-15 09:06:00 1607994360

      本篇文章給同學(xué)們介紹一種讓網(wǎng)頁標(biāo)題滾動(dòng)的教程,注意是網(wǎng)頁標(biāo)題而不是網(wǎng)頁內(nèi)部文字哦,趕緊收藏學(xué)習(xí)吧。

      怎么樣才能實(shí)現(xiàn)網(wǎng)頁標(biāo)題滾動(dòng)效果呢?時(shí)間就是金錢,廢話不多說,直接上代碼:

1

然后解釋一下每一行的意思吧:

      首先創(chuàng)建了一個(gè)變量 keyWords,用來存放網(wǎng)頁標(biāo)題滾動(dòng)的文字(字符串)

      接著創(chuàng)建一個(gè)命名函數(shù) titleChange 執(zhí)行以下操作:

      1. 用split() 方法(不改變?cè)甲址L動(dòng)的文字拆分為單個(gè)字符的數(shù)組keyList;

2

      2.用shift()方法移出位于數(shù)組 keyList 頭部的元素,并用變量 firstChar 存儲(chǔ);

      3. 用push()方法將步驟2中移除的字符,重新放到數(shù)組 keyList 的尾部;

      4. 用join() 方法將數(shù)組重新拼接為字符串,替換原本 keyWords 中存儲(chǔ)的文本(字符串);

      5. 用 document.title 將步驟4中重新拼接的字符串,重新賦值到網(wǎng)頁標(biāo)題中;

      這樣就將 keyWords 中原本的第一個(gè)字符移動(dòng)至最后一位,網(wǎng)頁標(biāo)題中原本位于第一個(gè)字符之后的文本會(huì)批量前移,實(shí)現(xiàn)文本向前滾動(dòng)的效果,但是由于函數(shù)每次調(diào)用只會(huì)執(zhí)行一次,所以最后我們還需要?jiǎng)?chuàng)建一個(gè)計(jì)時(shí)器,每個(gè)500毫秒重新調(diào)用一次 titleChange 函數(shù),最終實(shí)現(xiàn)網(wǎng)頁標(biāo)題循環(huán)滾動(dòng)的效果了。

      我們還可以看一看控制臺(tái)打印的 keyWords

v2-e0d70bd0f54ee4109d29afb40557b70d_b

      最后歡迎大家添加我們的前端分享交流qq群:791201477   或者  857920838  加群之后找群管理要web前端學(xué)習(xí)資料或者項(xiàng)目代碼即可,趕緊來添加吧。

 

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
瀑布開發(fā)和敏捷開發(fā)的區(qū)別是什么?

一、開發(fā)流程不同瀑布開發(fā)采用線性的開發(fā)流程,按照預(yù)先規(guī)劃的順序依次進(jìn)行需求分析、設(shè)計(jì)、編碼、測(cè)試和維護(hù)等環(huán)節(jié)。每個(gè)環(huán)節(jié)都有明確的交付物...詳情>>

2023-10-14 04:47:33
有哪款比較好用的免費(fèi)的缺陷管理工具?

一、BugzillaBugzilla是一款廣泛使用的免費(fèi)缺陷管理工具,具備完善的缺陷管理功能,并支持多用戶協(xié)同工作。Bugzilla提供了強(qiáng)大的搜索和過濾功能...詳情>>

2023-10-14 04:40:43
USB Type C電纜正反插都可以?

USB Type C電纜正反插都可以USB Type C電纜是一種通用連接標(biāo)準(zhǔn),其最顯著的特點(diǎn)是具備正反插功能。不論插頭的方向如何,用戶都可以輕松插入U(xiǎn)SB ...詳情>>

2023-10-14 04:31:18
為什么sql語句不支持關(guān)系代數(shù)中的除法?

為什么SQL語句不支持關(guān)系代數(shù)中的除法1. SQL和關(guān)系代數(shù)的關(guān)系:SQL是一種基于關(guān)系代數(shù)的查詢語言,它的設(shè)計(jì)初衷是為了能夠以一種更接近自然語言...詳情>>

2023-10-14 04:07:35
sql 怎么根據(jù)父id查詢下三級(jí)子集?

一、概述處理樹形數(shù)據(jù)時(shí),我們常常需要根據(jù)父ID查詢其下的子集。本文將引導(dǎo)您如何使用SQL進(jìn)行這一操作,尤其是查詢下三級(jí)子集。二、查詢方法詳...詳情>>

2023-10-14 03:59:07
快速通道