001.JS特效

一、Js实现单行文本的滚动

<!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>
View Code

 

posted on 2016-06-13 11:08  春江潮  阅读(219)  评论(0编辑  收藏  举报