摘自李刚《疯狂HTML 5/CSS 3/JavaScript讲义》
动态文字效果说明：
在IE浏览器状态栏下可看到下图所示的动态效果
实现代码如下
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Status</title> </head> <body οnlοad="stack();"> <script type="text/javascript" > var statusText = "自定义动画状态栏文字"; var out = ""; // 动画间隔时间 var pause = 25; // 动态字符移动宽度 var animateWidth = 20; // 动态字符当前位置 var position = animateWidth; // 动态字符最终移动到的位置 var i = 0; var stack = function() { if(statusText.charAt(i) != " ") { out = ""; for(var j = 0; j < i; j++) { out += statusText.charAt(j); } for(j = i; j < position; j++) { out += " "; } out += statusText.charAt(i); for(j = position; j < animateWidth; j++) { out += " "; } window.status = out; // 当新出现的字符移动到紧靠前面的字符串时 if(position == i) { animateWidth++; position = animateWidth; i++; } else { position--; } } else { i++; } if(i < statusText.length) { setTimeout("stack()", pause); } } </script> </body> </html>
