页面载入条

网站 2005-10-12 10:32

　前面也介绍过几种进入页面时的载入条，这里介绍的这个是一个无需任何图片制作出来的载入条。效果很精美
更适合于深色页面内的放入：
为了让大家能联连贯地看学好下面的步骤，所以此实例载入后的页面还是原页面。

页面：点这儿参观
制作方法
将下面的代码复制到<head>~</head>里

var ie5 = (document.all && document.getElementsByTagName);
var step = 0;
function setSB(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = v + "%";
valueEl.innerText = v + "%";
inforEl.innerText = message;
}
}
function setSBByStep(v, el, inforEl, message) {
if (ie5 || document.readyState == "complete") {
step = step + v;
filterEl = el.children[0];
valueEl = el.children[1];

if (filterEl.style.pixelWidth > 0) {
var filterBackup = filterEl.style.filter;
filterEl.style.filter = "";
filterEl.style.filter = filterBackup;
}

filterEl.style.width = step + "%";
valueEl.innerText = step + "%"
inforEl.innerText = message;
}
}

function fakeProgress(v, el) {
if (v >= 101)
location.href="http://www.1studio.net/";
else {
setSB(v, el, infor, " 欢迎访问 壹号工作室 http://www.1studio.net 页面正在加载中……");
window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 20);
}
}

//-->
</script>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将下面的代码复制到<body>里

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

将下面的代码复制到<body>~</body>里

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

实例注释：
定义载入条属性：
<DIV id=sb
style="BORDER-RIGHT: #ffffff 1px solid; 　　// 右边框边及宽度
BORDER-TOP: #ffffff 1px solid; 　　　　　　// 顶边框边及宽度
BACKGROUND: #00CCFF; 　　　　　　　　　// 背景色
WIDTH: 400px; 　　　　　　　　　　　　　// 图层宽度
BORDER-BOTTOM: #cccccc 1px solid; 　　　// 底边框边及宽度
HEIGHT: 14px; 　　　　　　　　　　　　　// 高度
TEXT-ALIGN: left">

至此你就可以完成这个实例了，快去试试

□浮生蕭條□

日志分类Categories

日历表calendar

最新发表Latest Posts

最近推荐Highlights

最新回复Comments

统计信息Total info

日志搜索Search

友情链接My Friends

其他信息Other

页面载入条

回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}