0

我想要这样，在加载我的页面时，应该有一个带有白色字母的黑屏。3 秒后它必须解散并且主页将可见。

如何使用 JavaScript 或 jQuery 做到这一点？

4

3 回答 3

1

首先，您需要一个适合该任务的 HTML 结构。作为兄弟的内容容器和覆盖容器可以很好地用于此目的。

示例 HTML

<div id="overlay">
    <p>Please wait while something wonderful happens</p>
</div>
<div id="content">
    <div id="lipsum">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
</div>

jQuery

要使用 jQuery 完成此操作，请先隐藏您的内容容器并使用内置.fadeOut方法。确保提供一个回调，在完成时显示您的内容容器。这是一个例子：

$(document).ready(function () {
    var showContent = function showContent() {
        //callback that fires once animation is complete.
        $('#content').show();
    }, hideOverlay = function hideOverlay() {
        $('#overlay').fadeOut('slow', showContent);
    };
    //after 3000 milliseconds (=3 seconds), call the hideOverlay function
    window.setTimeout(hideOverlay, 3000);
});

JavaScript

要使用普通的 JavaScript 来做到这一点，您需要opacity随着时间的推移调整元素的样式（window.setInterval这里是您的朋友。）这是一个示例：

window.onload = function () {
    var JSShowContent = function JSShowContent() {
        var content = document.getElementById('content');
        content.style.display = 'block';
    }, JSHideOverlay = function JSHideOverlay () {
        var overlay = document.getElementById('overlay'),
            opacity = 1,
            interval = 0,
            rate = 5; //rate is in milliseconds
        overlay.style.opacity = opacity; //set initial opacity as it defaults to ""
        interval = window.setInterval(function () {
            opacity -= 0.01; //decrement opacity
            overlay.style.opacity = opacity;
            if (opacity <= 0) {
                window.clearInterval(interval);
                overlay.style.display = 'none';
                JSShowContent();
            }
        } , rate);
    };
    //after 3000 milliseconds (=3 seconds), call the hideOverlay function
    window.setTimeout(JSHideOverlay, 3000);
};

现场演示

这是一个你可以玩的小提琴：http: //jsfiddle.net/dYrsP/

只需将函数更改window.setTimeout为hideOverlay并重新运行它即可查看 jQuery 版本。

于 2013-01-23T22:15:25.660 回答
1

假设您的黑屏是 id 为“黑屏”的 div

 <div id="black-screen">
      <!-- Black screen and white letters goes here -->
 </div>

在您的文档中的某处放置

<script>
    function hideBlackScreen(){
        $("#black-screen").hide('slow');
    }
    $(function(){
        setTimeout(hideBlackScreen, 3000);
    });
</script>

如果您愿意，我可以发布一些 jsfiddle 示例

这是关于 hide() 函数链接的 jQuery Docs

于 2013-01-21T12:20:50.587 回答
0

要拥有全屏 div：

http://andrewpeace.com/css-full-screen-div.html

<body style="height:100%">
<div style="width:100%;height:100%;
    position:absolute;
    top:0;left:0;
    background: none repeat scroll 0 0 black;
    vertical-align: middle;
    text-align: center;">
    <font style="color:white">My text</font>
</div>
于 2013-01-21T12:37:52.373 回答