结合定时器函数与window.status做出状态栏的文字动态移动效果

来源：互联网发布：techsmith软件编辑：程序博客网时间：2024/06/08 06:23

摘自李刚《疯狂HTML 5/CSS 3/JavaScript讲义》

动态文字效果说明：

在IE浏览器状态栏下可看到下图所示的动态效果

实现代码如下

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Status</title></head><body onload="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>

0 0