モバイルの赤い封筒の雨機能ページを実装するための 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 を応援していただければ幸いです。

以下もご興味があるかもしれません: