JavaScript 标题 title 滚动代码
分类：实例代码
网页头部 title 标签定义的内容默认情况下是静态的。
让其呈现动态效果，可能更加醒目，更能够吸引浏览者的注意力。
代码实例如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="author" content="http://www.pipipi.net/" />
<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()一章节。
一线大厂高级前端编写，前端初中阶面试题，帮助初学者应聘，需要联系微信：javadudu