この記事の例では、モバイル紅包雨機能ページを実現するための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 でショッピングカートを実装する
Linux は一般的にサーバーとして使用され、サーバーは一般的にコンピュータルーム内に置かれます。L...
テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...
Web プロジェクトがどんどん大きくなると、CSS は天文学的な大きさと複雑さを増します。この問題を...
マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...
IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...
この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...
a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...
私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...
適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...
グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例:...
Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...
目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...
この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...
インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...
目次導入準備するシステムイメージをダウンロードHyper-Vを有効にする新しい仮想ネットワークスイッ...