001.JS特效

時間 2019-11-11

原文原文鏈接

1、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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。