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

最新推荐文章于 2024-08-20 06:02:17 发布

YouDon'tKnowMe

最新推荐文章于 2024-08-20 06:02:17 发布

阅读量994

点赞数

本文链接：https://blog.youkuaiyun.com/Jessie_is_Gemini/article/details/70173254

版权

摘自李刚《疯狂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>