您的位置：首页 > 其它

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

2017-04-14 16:17 260 查看

摘自李刚《疯狂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 < sta
4000
tusText.length) {
setTimeout("stack()", pause);
}
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航