DOM跑马灯文字效果

DOM对象实现的标题栏跑马灯文字滚动效果,这里是取自title标签内的文字来实现跑马灯效果,只是为了演示Dom对象的用法。在示例中,可控制文字向左滚动、向右滚动,为了便于理解,代码中已给出完整的注释,相信是研究DOM操作的一个好例子。

<html>
<head>
<title>Dom跑马灯效果</title>
<script type="text/javascript" language="javascript">
var timeId = "";
//默认跑马灯效果
function run() {
  var title = document.title;
  var firsttitle = title.charAt(0);
  var remaintitle = title.substring(1, title.length);
  document.title = remaintitle + firsttitle;
}
//左转,字符串拼接
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() {
  //定义变量记录当前开启的计时器ID
  leftclearId = setInterval('leftrun()', 500);
  //清除正在运行的计时器
  clearInterval(rightclearId);
}
//右滚方法
function rightsetInter() {
  //定义变量记录当前开启的计时器ID
  rightclearId = setInterval('rightrun()', 500);
  //清除正在运行的计时器
  clearInterval(leftclearId);
}
</script>
</head>
<body>
    <input type="button" value="跑马灯效果" onclick="timeId=setInterval('run()',500)"/>
    <input type="button" value="停止" onclick="clearInterval(timeId)"/><br/><br/><br/>
    <input type="button" value="向左滚动" onclick="leftsetInter()"/>
    <input type="button" value="向右滚动" onclick="rightsetInter()"/>
</body>
</html>



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章