モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

モバイルの赤い封筒の雨機能ページを実装するための JavaScript HTML

この記事の例では、モバイル紅包雨機能ページを実現するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • モバイルの赤い封筒の雨のページを実装するための JavaScript
  • 赤い封筒の雨の効果を実現するための js+css

<<:  JSはオンラインでのアナウンスのスクロール効果を実現します

>>:  ネイティブ JavaScript でショッピングカートを実装する

推薦する

Linux リモートログイン実装チュートリアル分析

Linux は一般的にサーバーとして使用され、サーバーは一般的にコンピュータルーム内に置かれます。L...

インデックスを使用して MySQL ORDER BY ステートメントを最適化する方法

テーブルの作成とインデックスの作成 テーブルtbl1を作成( id int ユニーク、sname v...

CSS変数var()の使い方を理解する必要があります

Web プロジェクトがどんどん大きくなると、CSS は天文学的な大きさと複雑さを増します。この問題を...

マウスが画像のハイパーリンク上を通過するときに画像のサイズ(幅、高さ)を変更する CSS

マウスが画像の上を通過したときに画像のハイパーリンクを変更する方法:コードをコピーコードは次のとおり...

Web スライスとは何ですか?

IE8 の新機能 Web スライス (Web スライス) Microsoft は 3 月 20 日...

Centos7 環境でソースコードから mysql5.7.16 をインストールする方法の詳細な説明

この記事では、centos7 環境でソース コードから mysql5.7.16 をインストールする方...

ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

a および href 属性 HTML では、英語ではアンカーと呼ばれるハイパーリンクを表すために &...

HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイア...

SQLで同じフィールドの異なる値のデータ統計を実行する

適用シナリオ: シールのさまざまな状態に応じて、さまざまな状態のシールの数をカウントする必要がありま...

MySQLデータのグループ化の詳細な説明

グループを作成グループ化は、SELECT ステートメントの GROUP BY 句で設定されます。例:...

VScode リモート SSH リモート編集とデバッグコード

Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...

vue3.0 プロジェクトを素早く構築するための手順を完了する

目次1. 3.0をより適切にサポートするには、vue/cliのバージョンが4.5.0以上であることを...

検証コードケースのjs実装

この記事の例では、検証コードを実装するためのjsの具体的なコードを参考までに共有しています。具体的な...

MySQLにインデックスを追加する方法

インデックスの簡単な紹介は次のとおりです。インデックスを追加する目的は、データベース クエリのパフォ...

Hyper-v仮想マシンを使用してCentos7をインストールする

目次導入準備するシステムイメージをダウンロードHyper-Vを有効にする新しい仮想ネットワークスイッ...