English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
jsプロジェクトロードアニメーションプログラムは私の個人的な作品です。悪くないですが、参考にしてください。ただし、私の許可なしに他の用途には使用しないでください!
朝日、ホームページのプロジェクトロードアニメーションを作成しました。ブログに使おうと思ったんですが、ブログパークは読み込みが早すぎてアニメーションの効果は見られませんでした。‘Complete’に直接読み込まれてしまいました。もう少し考え直しましょう。ブログを肥大化させたくありません!
そこで、デモページを作成し、bodyにiframeを追加して大きなウェブサイトをロードし、効果がわかるようにしました!
Safariで開くと、CSSアニメーションの再生時間が同期に変わってしまいました、原因はわかりません、ローカルテストでは問題ありません(神様、指摘してください!)、Chrome、Firefoxでは問題ありませんが、IEはテストしていません
ロード時間の統計は、Windowsオブジェクトのperformance属性を使用して行いました、これは正確な時間を計算するために特別に用意された方法であり、MDNについての情報ですperformance属性の説明
このサンプルの実現原理は比較的シンプルですが、実際のファイルサイズに基づいてロード進捗を表示するのではなく、document.readyStateの状態に基づいて表示を変更するだけです。実際にはもう少し信頼性のある方法もあります、XMLHttpRequestオブジェクトのprogressイベントを使用して、XMLHttpRequestの詳細な解説を行います、例えば:
var request = new XMLHttpRequest(); request.onprogress = function (e) { if(e.lengthComputable){ //lengthComputableはファイルにサイズがあるかどうかを示し、true、falseの値を持ちます progress.innerHTML = Math.round(100* e.loaded/ e.total) + \'%\'; //loaded、totalは、既に読み込まれたサイズと全体のサイズを表します } }
以上の方法で実現することは面倒で、それどころか実現できないこともあります100%の実際のロード進捗度、だから少し嘘をついて、それを使わないことにしました!
このサンプルでは、document.styleSheets[0].insertRule()メソッドも使用されています、ここでその要約を提供します:原生JSを使用してCSSスタイルを読み書きする方法の要約
CSSアニメーションの実現について、皆さん自身でコードをご覧ください、非常にシンプルなコードですが、読みにくい場合はCSSの基礎を補強することをお勧めします、干货を紹介しますCSS中国語参考マニュアルウェブサイト、私の表現能力が限られているので、ここでは口にしないでください
以下は完全なコードです+デモ:
!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>苏福的作品</title> <script> document.onreadystatechange = function () { function $id(id){return document.getElementById(id)} var width = 0, id, preloader_line = $id('preloader_line').firstElementChild, preloader = $id('preloader'), preloader_center = $id('preloader_center'), preloader_btn = $id('preloader_btn'), preloader_loading = $id('preloader_loading'); if (document.readyState == "interactive") { loading(1,110,50); } if (document.readyState == "complete") { loading(5,120,16.7); preloader_loading.id = 'preloader_loaded'; preloader_loading.innerHTML = 'Loading Complete'+'<br/'>+'Using: '+performance.now().toFixed(3)+' ms'; preloader_btn.innerHTML = 'E N T E R'; preloader_btn.style.borderBottom = '4px solid green'; preloader_btn.style.fontStyle = 'inherit'; preloader_btn.style.fontSize = '24px'; if(document.styleSheets[0].insertRule){ document.styleSheets[0].insertRule('#preloader_btn:hover{border-bottom: 4px solid green; border-radius: 60px; color: red;}', 0); }else{//兼容IE9以下 document.styleSheets[0].addRule('#preloader_btn:hover{border-bottom: 4px solid green; border-radius: 60px; color: red;}', 0); } preloader_btn.onclick = function () {}} var 不透明度 = 1、id; function 非表示(){ if(不透明度<=0){ clearTimeout(id); preloader.style.display = 'none'; document.body.style.overflow = 'auto'; リターン; } 不透明度 -= 0.;1; preloader.style.opacity = 不透明度; id = setTimeout(function(){ 非表示(); },50); } 非表示(); }; } function ローディング(ステップ、最大値、時間){ if(width>=最大値){ clearTimeout(id); if(最大値>= 120){ preloader_line.parentNode.style.display = 'none'; } リターン; } width += ステップ; preloader_line.style.width = width+'px'; id = setTimeout(function(){ ローディング(ステップ、最大値、時間); },時間); } }; </スクリプト> <スタイル> body{ オーバーフロー:ヒidden; } #preloader{ position: absolute; width: 100%; height: 100%; background-色:白色; z-インデックス: 999; } #preloader_center{ position: absolute; left: 0; right: 0; トップ:0; ボトム:0; width: 150px; height: 75px; margin:auto; } #preloader_loading{ position: absolute; left: 0; right: 0; top: 45px; マージン:オート; width: 96px; height: 30px; } #preloader_loaded{ position: absolute; left: 0; right: 0; top: 45px; マージン:オート; font-サイズ: 12px; テキスト-align: center; line-height: 30px; } #preloader_loading span{ position: absolute; width: 10px; height: 2px; トップ:0; ボトム:0; margin:auto; background-color: #9b59b6; アニメーション:loading 1.5秒無限エイシズ-イン-アウト ; } #preloader_loading span:nth-子(2){ 左: 12px; アニメーション-遅延:.1s; } #preloader_loading span:nth-子(3){ 左: 24px; アニメーション-遅延:.2s; } #preloader_loading span:nth-子(4){ 左: 36px; アニメーション-遅延:.3s; } #preloader_loading span:nth-子(5){ 左: 48px; アニメーション-遅延:.4s; } #preloader_loading span:nth-子(6){ 左: 50px; アニメーション-遅延:.5s; } #preloader_loading span:nth-子(7){ 左: 62px; アニメーション-遅延:.6s; } #preloader_loading span:nth-子(8){ 左: 74px; アニメーション-遅延:.7s; } #preloader_loading span:nth-子(9){ 左: 86px; アニメーション-遅延:.8s; } @keyframes loading { 0%{高さ: 2px;背景色:#9b59b6;} 15%{高さ: 20px;背景色:#3498db;} 50%{高さ: 2px;背景色:#9b59b6;} 100%{高さ: 2px;背景色:#9b59b6;} } iframe{width: 100%;高さ: 1000px;} #preloader_btn{ position: absolute; left: 0; right: 0; トップ:0; margin:auto; display: block; width: 122px; height: 40px; font-サイズ: 14px; テキスト-align: center; line-height: 40px; cursor: pointer; color: #9b59b6; font-style: italic; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #preloader_line{ position: absolute; left: 0; right: 0; top: 40px; margin:auto; width: 120px; height: 2px; border: 1px solid green; } #preloader_line span{ display: block; height: 2px; width: 0; background-color: green; } </style> </head> <body> <div id="preloader"> <div id="preloader_center"> <span id="preloader_btn">Loading...</span> <span id="preloader_line"> <span></span> </span> <div id="preloader_loading"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <iframe src="http://jd.com"></iframe> </body> </html>
これでこの記事は全てです。皆さんの学習に役立てば幸いですし、もっとサポートしていただければと思います。
声明:この記事の内容はインターネットから取得しており、著作権者は所有しており、インターネットユーザーが自発的に貢献し、自己でアップロードしています。このサイトは所有権を持ちません。また、人間のエディタによる編集は行われていません。著作権に関する問題があれば、以下のメールアドレスまでご連絡ください:notice#oldtoolbag.com(メールで報告する場合は、#を@に置き換えてください。証拠を提供し、確認された場合は、このサイトは即座に侵害する疑いのあるコンテンツを削除します。)