ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS プロンプト ボックス「読み込み中です。」 。 。 。 。 'メソッド
この記事では主にCSS制作プロンプトボックス「読み込み中です。」について紹介します。 。 。 。 。 ' メソッドには特定の参照値があります。必要な友人はそれを参照できます。最近、ページのデータの読み込みが遅く、以下のエディターで応答がありませんでした。 CSS に基づいて「読み込み中です」というプロンプト ボックスを作成しました。 。 。 。 。 '機能、必要な友達はそれを参照できます
要件:
データの読み込みが時々遅く、ページが応答せず、ユーザーがスクロールし続ける可能性があり、ユーザーエクスペリエンスが良くありません
必要に応じて R//提示信息
function AddRunningp() {
$("<p class=\"datagrid-mask\"></p>").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body");
$("<p class=\"datagrid-mask-msg\"></p>").html("正在处理,请耐心等待...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 });
}
//取消提示信息
function MoveRunningp() {
$("p[class='datagrid-mask']").remove();
$("p[class='datagrid-mask-msg']").remove();
}
Pooreee
を呼び出す次のコードを JS に追加します。 効果は次のとおりです: ページ全体を編集できません すべてのコンテンツが皆様の学習に役立つことを願っています。関連コンテンツについては、こちらにご注目ください。 PHPの中国語サイトです! 関連おすすめ: CSS3で制作された約20個の読み込みアニメーション効果css3 image border border-imageの使用について
以上がCSS プロンプト ボックス「読み込み中です。」 。 。 。 。 'メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。