この記事の例では、モバイル紅包雨機能ページを実現するためのHTMLの具体的なコードを共有しています。具体的な内容は次のとおりです。 効果は以下のとおりです。 具体的なコードは以下のとおりです HTML部分: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <meta http-equiv="X-UA-compatible" content="ie=edge"> <title>赤い封筒の雨</title> <link rel="スタイルシート" href="./css/demo.css" > <link rel="スタイルシート" href="./css/index.css" > </head> <本文> <!-- 赤い封筒 --> <ul class="redPaper"> <!-- <li> <a href="#" ><img src="./images/hb_1.png" alt=""></a> </li> --> </ul> <div class="backward"> <span></span> </div> <script src="./js/jquery.min.js"></script> <script src="./js/index.js"></script> <スクリプト> </スクリプト> </本文> </html> demo.cssは初期化CSSなので、追加する必要はありません。 index.css セクション 体{ 幅: 100%; 高さ: 100%; 背景画像: url(../images/bj.jpg); 背景繰り返し: 繰り返しなし; 背景サイズ: カバー; 位置: 相対的; } .redPaper{ 幅: 100%; 高さ: 100%; /* 境界線: 1px 黒一色; */ オーバーフロー: 非表示; } .redPaper li { 位置: 絶対; アニメーション: すべて 3 秒リニア; 上:-100px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .redPaper li a{ 表示: ブロック; } .後方{ 幅: 100%; 背景:#ccc; 不透明度: 0.5; 位置: 絶対; 上: 0; } .後方スパン{ 表示: インラインブロック; 幅: 100ピクセル; 高さ: 100px; 色: #000; フォントの太さ: 太字; 位置: 絶対; 上: 0; 左: 0; 右: 0; 下部: 0; マージン: 自動; テキスト配置: 中央; 行の高さ: 100px; フォントサイズ: 1000%; } index.js 部分: $(ドキュメント).ready(関数() { var win = (parseInt($('.redPaper').css('width'))) - 60; コンソール.log(win) $(".redPaper").css("高さ", $(document).height()); $(".backward").css("height", $(document).height()); $("li").css({}); // 確認をクリックするとモーダルレイヤーを閉じる// $(".sen a").click(function(){ // $(".mo").css("display", "none") // }); var del = 関数() { 数値++; // console.info(数値); // console.log($(".li" + nums).css("left")); $(".li" + 数値).remove(); タイムアウトを設定します(del, 200) } var addRedPaper = 関数(){ var hb = parseInt(Math.random() * (3 - 1) + 1); var randomW = parseInt(Math.random() * (70 - 30) + 20); var randomLeft = parseInt(Math.random() * win); var randomRotate = (parseInt(Math.random() * 45)) + 'deg'; // コンソール.log(rot) 数値++; $(".redPaper").append("<li class='li" + num + "' ><a href='javascript:;'><img src='images/hb_" + hb + ".png' data-num ='" + num + "'></a></li>"); $(".li" + 数値).css({ "左": ランダム左、 }); $(".li" + num + " a 画像").css({ "幅": ランダムW, "変換": "回転(" + ランダム回転 + ")", "-webkit-transform": "回転(" + ランダム回転 + ")", "-ms-transform": "rotate(" + randomRotate + ")", /* インターネット エクスプローラー */ "-moz-transform": "rotate(" + randomRotate + ")", /* Firefox */ "-webkit-transform": "rotate(" + randomRotate + ")",/* Safari および Chrome */ "-o-transform": "rotate(" + randomRotate + ")" /* オペラ */ }); $(".li" + num).animate({ 'top': $(window).height() + 20 }, 5000, 関数() { // 表示された赤い封筒を削除します this.remove() }); //赤い封筒をクリックすると、モーダルレイヤーがポップアップします $(".li" + num).click(function (e) { if (e.target.tagName == 'IMG') { コンソールログ(e.target.dataset.num) } }); タイムアウトを設定します(addRedPaper、200) } //赤い封筒を増やす var num = 0; タイムアウトを設定します(addRedPaper、3000); //カウントダウン var backward = function () { numz--; (数値 > 0)の場合{ $(".backward span").html(numz); } それ以外 { $(".backward").remove(); } setTimeout(後方、1000) } var numz = 4; 後方(); }) 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: JSはオンラインでのアナウンスのスクロール効果を実現します
>>: ネイティブ JavaScript でショッピングカートを実装する
目次1. Array.at() 2. Array.copyWithin() 3. 配列.entrie...
<tr> <th width="12%">あああ<...
背景mysql.slow_log からスロー クエリ ログを取得するのは遅く、テーブルは csv テ...
この記事では、グラフィック認証コードログインを実装するためのVueの具体的なコードを参考までに紹介し...
1. サーバー環境の構成: 1. ディスクパーティションを確認します。最近、あるプロジェクト内のサー...
目次序文1. MySQL マスタースレーブレプリケーション1. サポートされているレプリケーションの...
ゴミ箱は Linux ユーザー、Windows ユーザー、Mac ユーザーにとって非常に一般的なので...
html2canvas は、HTML 要素からキャンバスを生成するライブラリです。描画されるキャンバ...
Activiti7 の正式リリース以降、SpringBoot2.x との統合開発を全面的にサポートし...
1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
まず、CSS3 の相対的な長さの単位を見てみましょう (詳細なチュートリアルを参照してください)。相...
バージョン1.4.2公式ドキュメントドッカーハブ起動する環境変数SEATA_CONFIG_NAMEを...
mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...
「nofollow」タグは数年前に Google、Yahoo、Microsoft によって提案されま...