5

これはまさに私が探しているものです: http://hoverstud.io 。私はこのようなものを探していません-> http://bit.ly/11jdunO、問題とバグが多すぎます。

誰かがチュートリアルやリンクを見つけるのを手伝ってくれませんか?

4

3 に答える 3

6

これには、いくつかの新しくてクリーンなツールを利用します。最近では、CSS トランジションを使用してこれを行うことができます。

非常に簡単な例を次に示します。

<html>
  <head>
    <style>
      .container {
        opacity: 0;
        transition: opacity 1s;
      }

      .container-loaded {
        opacity: 1;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- All the content you want to fade-in here. -->
    </div>
    <script>
      $(document).ready(function() {
        $('.container').addClass('container-loaded');
      });
    </script>
  </body>
</html>

ここでは、ページ間の移行はページ全体のリロードであると想定しているため、ページがリロードされるとcontainer-loadedクラスはなくなります。

しかし、一般的なフレームワーク、 Turbolinksなどを使用して、1 ページの Web アプリにこれを実装するのはほとんど簡単です。

その他の注意事項:

  • ページ画像も読み込まれるまで待ちたい場合は、document.onload代わりに$(document).ready().
  • classListsdocument.querySelectorが利用可能であれば、jQuery を使用せずに実装するのはほぼ同じくらい簡単です。
于 2014-09-13T02:22:37.397 に答える
2

私はこのようなものを構築しました。

最初に、このような div の HTML に #preloader を配置します

<div id="preloader"></div>

必要に応じて、GIF を内部に配置できます。

次に、いくつかの CSS をセットアップします。

#preloader {
        background: #FFF;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 9999;
    }

次のようなスクリプトを作成します。

$(window).load(function() {
     $('#preloader').delay(350).fadeOut('slow');
});

$('a').click(function(e){
     e.preventDefault();
     t = $(this).attr('href');
     $('#preloader').delay(350).fadeIn('slow',function(){
          window.location.href = t;
     });
});

そして、あなたは完了です:)

最初の部分は、ウィンドウの読み込み時にプリローダーを表示し、次にフェードアウトすることです。

2 つ目は、アーチャーのクリックをプリローダーの fadeIn にバインドし、アーチャーの href にリダイレクトすることです。

于 2015-06-13T01:19:56.607 に答える