網頁title標題滾動效果程式碼例項

admin發表於2017-04-12
網頁

不少網站有這樣的功能，那就是標題能夠實現類滾動效果。

這樣的功能比較適合於標題比較長的情況，也實現了動態效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" gb2312">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落-div教程-css教程</title>
<script>
window.onload = function () {
  var text = document.title
  var timerID
  function newtext() {
    document.title = text.substring(1, text.length) + text.substring(0, 1)
    text = document.title.substring(0, text.length)
    timerID = setTimeout(newtext, 100)
  }
  newtext()
}
</script>
</head>
<body>
<p>請觀察標題滾動現象</p>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var text = document.title，獲取網頁的標題。

（3）.var timerID，宣告一個變數，後面會用作定時器函式的標識。

（4）.function newtext() {}，此函式實現滾動效果。

（5）.document.title = text.substring(1, text.length) + text.substring(0, 1)，重新設定標題，方式是將原標題的第一個字元放置到末尾，這樣是不是就感覺向左滾動了一下。

（6）.text = document.title.substring(0, text.length)，將當前標題字串春出在變數text中。

（7）.timerID = setTimeout(newtext, 100)，使用setTimeout()方法遞迴呼叫newtext。

二.相關閱讀:

（1）.substring()可以參閱javascript substring()一章節。

（2）.setTimeout()方法可以參閱setTimeout()方法一章節。

相關文章