實現網頁標題跳動效果程式碼例項

antzone發表於2017-04-11
網頁

本章節分享一段程式碼例項，它實現了讓title標題跳動起來的效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落歡迎您，本站的url地址是www.softwhy.com</title>
<script type="text/javascript">
var dir = "left";
function scroll() {
  //獲取title
  var title = document.title;
  if (dir == "left") {
    //獲取title第一個漢字（數字、字母）。
    var firstch = title.charAt(0);
    //獲取第二位到最後的資訊
    var leftstr = title.substring(1, title.length);
    // 拼接輸出資訊
    document.title = leftstr + firstch;
  }
  else if (dir == "right") {
    var lastch = title.charAt(title.length - 1);
    var leftstr = title.substring(0, title.length - 1);
    document.title = lastch + leftstr;
  }
  function setDir(d) {
    dir = d;
  }
}
//使用setInterval()方法執行
setInterval("scroll()", 500);
</script>
</head>
<body>
本站編輯器無法正常演示此效果，建議複製黏貼到本地測試
</body>
</html>

上面的程式碼就是一個比較好的演示效果，程式碼已經有了註釋，這裡不多介紹了。

更多內容可以參閱新資訊提醒標題閃動例項程式碼一章節。

相關文章