js標題title滾動程式碼例項

antzone發表於2017-04-07
JS

網頁的標題，也就是網頁頭部title標籤定義的內容，通常情況下它是靜態的，但是有時候如果讓它滾動起來可能會更能吸引瀏覽者的眼球，相比靜態的標題更能夠留下深刻的印象，本章節就通過程式碼例項詳細介紹一下如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.softwhy.com/" />
<title>標題滾動效果-螞蟻部落</title>
<script type="text/javascript">
var timeId = "";
function leftrun() {
  var title=document.title;
  var firsttitle=title.charAt(0);
  var remaintitle=title.substring(1, title.length);
  document.title=remaintitle + firsttitle;
}
function rightrun() {
  var title = document.title;
  var righttitle = title.substring(title.length - 1, title.length);
  var remaintitle = title.substring(0, title.length - 1);
  document.title = righttitle + remaintitle;
}
var leftclearId;
var rightclearId;
function leftsetInter() {
  leftclearId = setInterval('leftrun()',500);
  clearInterval(rightclearId);
}
function rightsetInter() {
  rightclearId = setInterval('rightrun()',500);
  clearInterval(leftclearId);
}
window.onload=function(){
  var leftR=document.getElementById("leftR");
  var rightR=document.getElementById("rightR");
  var stopR=document.getElementById("stopR");
   
  leftR.onclick=function(){leftsetInter()}
  rightR.onclick=function(){rightsetInter()}
  stopR.onclick=function(){clearInterval(timeId)}
}
</script>
</head>
<body>
<input type="button" value="向左滾動" id="leftR" />
<input type="button" value="向右滾動" id="rightR" />
<input type="button" value="停止" id="stopR"/>
</body>
</html>

以上程式碼實現了了我們的要求，點選按鈕可以實現控制標題向不同的方位滾動，下面就介紹一下它的實現過程。

一.實現原理:

實現原理其實很簡單，標題的滾動其實也是一個視覺錯覺而已，以向左滾動為例，leftrun()函式每執行一次，都會講當前標題第一個字元從標題的第一位置移動到末尾，使用定時器函式不斷呼叫leftrun()函式，如此迴圈就形成了視覺的滾動效果。

二.相關閱讀:

1.charAt()函式可以參閱javascript charAt()一章節。 

2.substring()函式可以參閱javascript substring()一章節。

3.setInterval()函式可以參閱setInterval()一章節。  

4.clearInterval()函式可以參閱clearInterval()一章節。

相關文章