0

ページの読み込み中に、白い文字が表示された黒い画面が表示されるようにします。そして3秒後にそれは溶解しなければならず、メインページが表示されます。

JavaScriptまたはjQueryのいずれかでそれを行うにはどうすればよいですか？

4

3 に答える 3

1

黒い画面が id 'black-screen' の 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 ドキュメントです。

于 2013-01-21T12:20:50.587 に答える
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 に答える
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 に答える