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>