HTML 通过GIF实现loading动画(非进度条版)。

来源:互联网 发布:电影票软件 编辑:程序博客网 时间:2024/05/02 00:21

HTML必须包含以下代码:

head里必须有:

<style type="text/css">

.mask_loading 
{
    text-align:center;
    z-index:2000;
    background-color:#000000;
    position:absolute;
    top:0px;
    left:0px;
    opacity:0.5;
    filter: Alpha(Opacity=60);
}

</style>


body里必须有:

<!-------------其他东西写在这---------------->


<div id="loadingdiv" class="mask_loading" style="display:none">
                    </div>
                    <div id="loadingimg" style="position: absolute; z-index: 2014; display:none">
                    <img  src="image/loading.gif" alt="" border="0px" height="30px" width="30px" />  

<!------------------这个img就是载入动画的GIF----------------------------->
                    </div>



JS代码:

document.onreadystatechange = Something; //当页面加载状态改变的时候执行这个方法. 

function Something() {
    var loadingimg = document.getElementById("loadingimg");
    var loadingdiv = document.getElementById("loadingdiv");
    if (document.readyState == "complete") //判断页面加载状态 
    {
        ready();
    }
    else {
        var windowWidth = window.screen.width;
        var windowHeight = window.screen.height+100;
        loadingdiv.style.width = windowWidth + "px";
        loadingdiv.style.height = windowHeight + "px";
        loadingdiv.style.display = "block";
        loadingimg.style.top = window.screen.height / 2.5 + "px";
        loadingimg.style.left = (windowWidth / 2 - 15) + "px";
        loadingimg.style.display = "block";
    }
}

function ready() {
    document.getElementById("loadingimg").style.display = "none";
    document.getElementById("loadingdiv").style.display = "none";
}

//下面是单独的loading,方便植入数据交互较大的事件中
function loading() {
    var loadingimg = document.getElementById("loadingimg");
    var loadingdiv = document.getElementById("loadingdiv");
    var windowWidth = window.screen.width;
    var windowHeight = window.screen.height+100;
    loadingdiv.style.width = windowWidth + "px";
    loadingdiv.style.height = windowHeight + "px";
    loadingdiv.style.display = "block";

    loadingimg.style.top = window.screen.height / 2.5 + "px";
    loadingimg.style.left = (windowWidth / 2 - 15) + "px";
    loadingimg.style.display = "block";
}

0 0
原创粉丝点击