通过jQuery使用淡出div作为启动画面?

时间:2012-04-07 04:16:47

标签: jquery html splash-screen fadeout

在页面加载时显示div的脚本,使用jQuery模拟启动画面时淡出?

2 个答案:

答案 0 :(得分:0)

这很简单!你可以使用jQuery fadeOut()! 这是代码:

CSS

#splashscreen {
    height: 100%;
    width: 100%;
    z-index: 99;
}

上面的CSS会使启动画面填满整个页面并超越一切。

jQuery JS

$(window).load(function() {
    $('#splashscreen').fadeOut('slow');
});

它会做的是,当它检测到页面已加载时,它会慢慢淡化splashscreen div。

HTML

<div id="splashscreen">
    Put your splashscreen content here. It can be anything!
</div>

这就是创建启动画面所需的全部内容。不幸的是,这在JSFiddle中无法模拟。

答案 1 :(得分:-1)

您可以在加载脚本的某些部分后调用函数来计算负载:

$(document).ready(function() {
    var oneLoaded;
    function partOneLoaded() {
        oneLoaded = 1;
        loadReady();
    }
    var twoLoaded;  
    $('div').load('../inc/salesstatus.php, function() {
        twoLoaded = 1;
        loadReady();
    });      
    function loadReady(){
        if (oneLoaded == 1 && twoLoaded == 1)
            $('#loadcontainer').fadeOut('slow');
    }

/* ****rest of your script here  ****** */

// ie) at the end of your scripts: 

partOneLoaded();    

});

加载某些内容或运行脚本后,您可以调用您的函数,并且每次尝试调用loadReady()。只有最后一次尝试才能成功淡出你的div。在脚本末尾添加一个调用,如果在加载其他内容之前loadcontainer为fadesOut,则在尚未加载的项目末尾添加另一个函数。

我不会接受加载div的css和html,因为它超出了你的问题的范围。

你的问题很模糊。将来,请提供更多详细信息,以便我们更好地了解您的工作内容。