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


    第一款
    将下列代码保存为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("<!-- Hide ");  
    document.writeln("function killErrors() { ");  
    document.writeln("return true; ");  
    document.writeln("} ");  
    document.writeln("window.onerror = killErrors; ");  
    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%;   
        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;   
        130px;   
        border:1px solid #5a667b;   
        text-align:left;   
        z-index:2;   
    }   
    #progress {   
        height:5px;   
        font-size:1px;   
        1px;   
        position:relative;   
        top:1px;   
        left:0px;   
        background-color:#8894a8;   
    }   
    #loader_bg {   
        background-color:#e4e7eb;   
        position:relative;   
        top:8px;   
        left:8px;   
        height:7px;   
        113px;   
        font-size:1px;   

    紧跟<body>中加入

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

    <head>间加入

    <style type="text/css" title="currentStyle" media="screen">
    @import "css.css";
    </style>
    <script language="JavaScript" src="load.js"></script>

    </body>前加入

    <script language="javascript">
    remove_loading();
    </script>

  • 相关阅读:
    利用智能手机(Android)追踪一块磁铁(三)
    利用智能手机(Android)追踪一块磁铁(二)
    利用智能手机(Android)追踪一块磁铁(一)
    android音频发生器
    接口的作用(java)
    Botposter.com集群ETCD2.3.7升级至3.0实录[原创]
    springboot2+jpa+hikari+oracle实战
    Nginx配置详解
    Nginx安装启动+springboot项目实现负载均衡实战
    springboot使用websocket进行实时传送信息实战(包含服务端和客户端)
  • 原文地址:https://www.cnblogs.com/zhoulin/p/1338468.html
Copyright © 2020-2023  润新知