麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

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

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關(guān)注千鋒學習站小程序
隨時隨地免費學習課程

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

十行代碼實現(xiàn)網(wǎng)頁標題滾動效果

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

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

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

1

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

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

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

      1. 用split() 方法(不改變原始字符串)將滾動的文字拆分為單個字符的數(shù)組keyList;

2

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

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

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

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

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

      我們還可以看一看控制臺打印的 keyWords

v2-e0d70bd0f54ee4109d29afb40557b70d_b

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

 

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

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

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

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

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

USB Type C電纜正反插都可以USB Type C電纜是一種通用連接標準,其最顯著的特點是具備正反插功能。不論插頭的方向如何,用戶都可以輕松插入USB ...詳情>>

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ù)的查詢語言,它的設計初衷是為了能夠以一種更接近自然語言...詳情>>

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

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

2023-10-14 03:59:07
主站蜘蛛池模板: 一级大黄色片| 萌白酱福利| 亚洲国产综合专区在线电影| 老子午夜伦不卡影院| 天天躁夜夜躁很很躁| 午夜一区二区在线观看| 亚洲国产成人久久| 在线黄色毛片| 日韩国产精品欧美一区二区| 国产在线91区精品| 国产1区2区在线观看| 久久精品国产亚洲精品| 男男污| 啊灬啊灬啊灬快灬深一| 麻豆影视视频高清在线观看| 第一毛片| 娇妻之欲海泛舟白丽交换| 韩国黄色网| 91久久偷偷做嫩草影院免| 亚洲精品99久久久久中文字幕| 天天操夜| 卡一卡2卡3高清乱码网| 日本理论在线| 大香煮伊在2020一二三久应用| www.俺去| 国产1区2区在线观看| 乱中年女人伦av三区| 国产精品9999久久久久| 免费a级毛片| 中文字幕影片免费在线观看| 欧美日韩在线视频不卡一区二区三区 | 岳打开双腿让我进挺完整篇| 蒂法3d同人全肉动漫在线播放| 91麻豆国产福利精品| 538在线观看| 白丝袜美女羞羞漫画| 豪妇荡乳1一5白玉兰免费下载| 无翼乌全彩无漫画大全| 免费的毛片基地| 国产呦系列免费| 在线视频这里只有精品|