前端教程分享:十行程式碼實現title滾動顯示
細心的同學可能會發現我們網站的title顯示的文字永遠都是固定的不會移動的,那麼有沒有什麼辦法能讓title滾動顯示呢?
怎麼樣才能實現網頁標題滾動效果呢?時間就是金錢,廢話不多說,直接上程式碼:
然後解釋一下每一行的意思吧:
首先建立了一個變數 keyWords,用來存放網頁標題滾動的文字(字串)
接著建立一個命名函式 titleChange 執行以下操作;
1. 用split() 方法(不改變原始字串)將滾動的文字拆分為單個字元的陣列keyList;
2. 用shift()方法移出位於陣列 keyList 頭部的元素,並用變數 firstChar 儲存;
3. 用push()方法將步驟2中移除的字元,重新放到陣列 keyList 的尾部;
4. 用join() 方法將陣列重新拼接為字串,替換原本 keyWords 中儲存的文字(字串);
5. 用 document.title 將步驟4中重新拼接的字串,重新賦值到網頁標題中;
這樣就將 keyWords 中原本的第一個字元移動至最後一位, 網頁標題中原本位於第一個字元之後的文字會批次前移, 實現文字向前滾動的效果,但是由於函式每次呼叫只會執行一次, 所以最後我們還需要建立一個計時器,每個500毫秒重新呼叫一次 titleChange 函式。
最終實現網頁標題迴圈滾動的效果了, 我們還可以看一看控制檯列印的 keyWords, 啊呀!我感覺做了一個洗剪吹門口的霓虹燈呀 。。。
趕緊去自己上手試一試吧!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2771300/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 十行程式碼實現網頁標題滾動效果!行程網頁
- js標題title滾動程式碼例項JS
- C#資訊無縫滾動顯示程式碼C#
- 網頁title標題滾動效果程式碼例項網頁
- 前端實現文字滾動效果前端
- 表格顯示滾動條
- 十行程式碼實現牛頓方法行程
- Java——圖片滾動顯示Java
- 直播軟體原始碼,實現頁面滾動到可視區顯示動畫效果原始碼動畫
- 十行程式碼實現高仿Promise行程Promise
- 好程式設計師web前端教程分享3種方法實現CSS隱藏捲軸並可以滾動內容程式設計師Web前端CSS
- 點選實現顯示密碼效果程式碼例項密碼
- 10行程式碼實現頁面無限滾動行程
- js實現的文字垂直滾動例項程式碼JS
- 微信小程式功能之全屏滾動效果的實現程式碼微信小程式
- 幾十行程式碼實現ASP.NET Core自動依賴注入行程ASP.NET依賴注入
- 超出文字顯示省略號,hover效果:文字滾動顯示==》求解
- 直播app原始碼,應用elementPlus table並滾動顯示APP原始碼
- 模擬實現連結title效果程式碼例項
- js程式碼實現的圖片水平無縫滾動JS
- javascript模擬實現滾動條效果程式碼例項JavaScript
- 一行程式碼實現滑鼠橫向滾動💪行程
- 拖動滾動條實現div跟隨效果程式碼例項
- 滾動cell 顯示隱藏導航欄
- asp.net開發中利用jquery來實現滾動下拉標題浮動固定顯示ASP.NETjQuery
- js實現關鍵詞高亮顯示程式碼例項JS
- vue之實現日曆----顯示農曆,滾動日曆監聽年月改變Vue
- Android之重寫ScrollView實現兩個ScrollView的同步滾動顯示AndroidView
- HashTable實現程式碼分享
- 90行程式碼,15個元素實現無限滾動行程
- 原生javascript實現的圖片無縫滾動程式碼分析JavaScript
- div顯示滾動條(類似合同閱讀)
- 實現陽曆和農曆顯示日期的javascript程式碼JavaScript
- 微信小程式實現滾動載入更多微信小程式
- javascript模擬實現連結的title效果例項程式碼JavaScript
- jQuery模擬實現超連結的title程式碼例項jQuery
- 好程式設計師web前端學習路線分享滾動穿透方法程式設計師Web前端穿透
- 幾十行程式碼實現一個vue的狀態管理行程Vue