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()一章节。

回复

我来回复
  • 暂无回复内容