<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
//实例：单行文本框中的文本，实现左右滚动
/*
分析结果：
（1）有一个单行文本框来实现动画
（2）网页一加载完，就开始执行动画
（3）文本向右走的思想：在文本前加空格，一次加一个
（4）文本向右走的边界：文本和空格的总长度等于文本框的宽度时，向左运动
（5）文本向走的思想：每次删除一个空格，通过提取字符串substr(1)
（6）文本向左走的边界：清除空格后的长度＝＝原始字符串长度，则向右运动
（7）设置定时器
*/
//变量初始化
var str = "北京今天又下大雨了";
var len = str.length;
var dir = "right"; //文本运行的方向，默认向右
function textAni()
{
//获取到单行文本框的对象
var obj = document.getElementById("result");
//动画根据方向运行
if(dir == "right")
{
//加了空格后的新的字符串
str = " "+str;
//将新的字符串，写入到id=result里
obj.value = str;
//判断是否到达右边界，如果到达右边界，更改运行方向
if(str.length == 33)
{
dir = "left";
}
}else if(dir == "left")
{
//每次提取从字符串中提取，索引号为1提取，为0则不要
str = str.substr(1);
//将新的字符串，写入到id=result
obj.value = str;
//判断是否到达左边界
if(str.length == len)
{
dir = "right";
}
}
//定时器
window.setTimeout("textAni()",100);
}
</script>
</head>
<body onload="textAni()">
<input type="text" id="result" value="北京今天又下大雨了" size="40" />
</body>
</html>
