两款页面内容进度加载效果

最新推荐文章于 2021-06-02 17:33:55 发布

anzheng9205

最新推荐文章于 2021-06-02 17:33:55 发布

阅读量136

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhoulin/archive/2008/11/21/1338468.html

版权

第一款
将下列代码保存为load.JS文件

    var s1 = setInterval("loading.innerText+='.'", 500);
    var s2 = setInterval("loading.innerText = ''", 8000);

    function window.onload()
    {
      clearInterval(s1);
      clearInterval(s2);
      loadingDiv.removeNode(true);

    }
document.writeln("<div id=\"loadingDiv\" style=\"z-index:50000;position:absolute;left:expression

((this.parentElement.offsetWidth-this.offsetWidth)\/2);top:expression((document.body.clientHeight

-this.style.pixelHeight)\/3+document.body.scrollTop);\">");
document.writeln(" <table border=\"1\" width=\"260\" cellspacing=\"0\" cellpadding=\"4\"

style=\"border-collapse: collapse;FILTER: Alpha(opacity=95)\" bgcolor=\"#ffffff\">");
document.writeln(" <tr>");
document.writeln("   <td bgcolor=\"#2D2D2D\">");
document.writeln("    <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln(" <tr>");
document.writeln("   <td style=\"font-size:12px;color:#ffffff\">");
document.writeln("    『独来读网』★页面正在加载...<\/td>");
document.writeln("   <td width=\"1\">");
document.writeln(" <span title=关闭 style=\"CURSOR: hand;color:white;font-size:12px;font-

weight:bold;margin-right:4px;\" onClick=\"document.all.loadingDiv.style.display=\'none\'\">×

<\/span>   <\/td>");
document.writeln(" <\/tr>");
document.writeln("    <\/table>");
document.writeln("   <\/td>");
document.writeln(" <\/tr>");
document.writeln(" <tr>");
document.writeln("   <td>");
document.writeln("    <table width=\"100%\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">");
document.writeln("     <tr>");
document.writeln("   <td width=\"35\" align=\"center\">");
document.writeln("    <img src=\"/js\/loadding.gif\" width=\"32\"> <\/td>");
document.writeln("   <td style=\"font-size:12px;color:#000000\">站点正在加载图片,请您耐心等

待....<span id=\"loading\"><\/span>");
document.writeln("   <\/td>");
document.writeln("     <\/tr>");
document.writeln("   <\/table><\/td>");
document.writeln("   <\/tr>");
document.writeln(" <\/table>");
document.writeln("<\/div>")
document.writeln("<SCRIPT LANGUAGE=\"javascript\"> ");
document.writeln(" ");
document.writeln("<\/SCRIPT>");

在HEAD中加入
<script language="JavaScript" type="text/javascript" src="/js/load.js"></script>

第二款：

JS文件代码保存为LOAD.js

<!--

//页面加载中效果开始
var t_id = setInterval(animate,20);
var pos=0;
var dir=2;
var len=0;
function animate() {
    var elem = document.getElementById('progress');
    if(elem != null) {
     if (pos==0) len += dir;
     if (len>32 || pos>79) pos += dir;
     if (pos>79) len -= dir;
     if (pos>79 && len==0) pos=0;
     elem.style.left = pos;
     elem.style.width = len;
    }
}
function remove_loading() {
    this.clearInterval(t_id);
    var targelem = document.getElementById('loader_container');
    targelem.style.display='none';
    targelem.style.visibility='hidden';
}

CSS代码保存为css.css

/* 页面加载特效 */
#loader_container {
    text-align:center;
    position:absolute;
    top:40%;
    width:100%;
    left: 0;
}
#loader {
    font-family:Tahoma, Helvetica, sans;
    font-size:11.5px;
    color:#000000;
    background-color:#FFFFFF;
    padding:10px 0 16px 0;
    margin:0 auto;
    display:block;
    width:130px;
    border:1px solid #5a667b;
    text-align:left;
    z-index:2;
}
#progress {
    height:5px;
    font-size:1px;
    width:1px;
    position:relative;
    top:1px;
    left:0px;
    background-color:#8894a8;
}
#loader_bg {
    background-color:#e4e7eb;
    position:relative;
    top:8px;
    left:8px;
    height:7px;
    width:113px;
    font-size:1px;
}

紧跟<body>中加入

<div id="loader_container">
<div id="loader" style="width: 130px; height: 48px">
<div align="center"><font color="#FF9900">页面正在加载中 <br>
请稍候...</font></div>
<div id="loader_bg"><div id="progress"> </div></div>
</div>
</div>

<head>间加入

</body>前加入

转载于:https://www.cnblogs.com/zhoulin/archive/2008/11/21/1338468.html

anzheng9205

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两款页面内容进度加载效果

第一款将下列代码保存为load.JS文件 var s1 = setInterval("loading.innerText+='.'", 500); var s2 = setInterval("loading.innerText = ''", 8000); function window.onload() { ...
复制链接

扫一扫