jQuery はラブエフェクトをクリックする

jQuery はラブエフェクトをクリックする

この記事では、jQueryのクリック時のラブエフェクトの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

コード:

<!DOCTYPE html>
<html lang="ja">

    <ヘッド>
        <メタ文字セット="UTF-8" />
        <title>ハート効果</title>
        <script type="text/javascript" src="jquery-3.2.1.min.js"></script>
        <スタイル タイプ="text/css">
            #愛
                幅: 30ピクセル;
                高さ: 30px;
                /*境界線: 1px 実線赤;*/
                位置: 絶対;
            }
            
            #初め {
                幅: 15px;
                高さ: 26px;
                背景色: 赤;
                位置: 絶対;
                右: 3.2px;
                下部: 0;
                変換: 回転(45度);
                境界線の半径: 10px 10px 1px 1px;
                不透明度: 1;
            }
            
            #2番 {
                幅: 15px;
                高さ: 26px;
                背景色: 赤;
                位置: 絶対;
                左: 3.2px;
                下部: 0;
                変換: 回転(-45度);
                境界線の半径: 10px 10px 1px 1px;
                不透明度: 1;
            }
        </スタイル>
    </head>

    <本文></本文>

    <script type="text/javascript">
        関数 random(lower, upper) {
            Math.floor(Math.random() * (upper - lower)) + lower を返します。
        }
        var body = document.getElementsByTagName("body")[0];
        document.onclick = 関数(e) {
            var num = ランダム(0, 19);
            // 色の配列 var color = ["peru", "goldenrod", "yellow",
                「シャルトリューズ」、「パレバイオレット」、「ディープピンク」、
                「ピンク」、「淡い緑」、「プラム」、
                「ダークオレンジ」、「パウダーブルー」、「オレンジ」、
                「オレンジ」、「蘭」、「赤」、
                「アクア」、「サーモン」、「ゴールド」、「ローングリーン」
            ]

            var divmain = document.createElement("div");
            var first = document.createElement("div");
            var second = document.createElement("div");
            // div に属性を追加します divmain.setAttribute("id", "love");
            divmain.setAttribute("class", "love");
            first.setAttribute("id", "first");
            second.setAttribute("id", "second");
            // 最も外側のレイヤーに内側のdivを追加します
            divmain.appendChild(最初の);
            divmain.appendChild(2番目);
            // マウスの位置に基づいて div の位置を決定します //divmain.style.top = e.pageY + "px";
            //divmain.style.left = e.pageX + "px";
            divmain.style.cssText = "上:" + e.pageY + "px;左:" + e.pageX + "px";

            // ハート型のdivにランダムな色を追加します first.style.backgroundColor = color[num];
            second.style.backgroundColor = color[num];
            body.appendChild(divmain);

            $(".love").animate({
                不透明度: "0",
                上: "-=50px"
            }, 1500);

        }

        // タイマーを使用してページのゴミを消去する setInterval(function() {
            var div = document.getElementsByClassName("love");
            var len = div.length;
            変数 数値;
            for(var i = len - 1; i >= 0; i--) {
                num = parseInt(div[i].style.opacity);
                数値 <= 0 の場合
                    div[i].remove();
                }
            }

        }, 3500);
    </スクリプト>

</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • snowfall.jquery.js を使って、画面全体にハートが飛び交う効果を実現します。
  • jquery+html5 ロマンチックな愛の告白アニメーション コード共有
  • jQueryとHTML5で作ったラブツリー告白アニメーション

<<:  VMware vSAN 入門概要

>>:  MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明

推薦する

MySQLはconnect_by_isleaf MySQLメソッドまたはストアドプロシージャに似た機能を実装します

最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...

Ubuntu で G++ を使用して CPP ファイルをコンパイルする

g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...

ブラウザタブの左端に表示されるウェブサイトのアイコンを設定します

この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...

ログインインターセプションを実装するためのVueルーティング

目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...

Nginx の負荷分散構成、ダウンタイム発生時の自動切り替えモード

厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...

経験者のHTMLの書き方と理由の分析

1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...

Webフロントエンド開発におけるエラーを見つけるための基本的な考え方

WEB開発は主に2つのインタラクション(B/Sデータ)から構成されますブラウザ: 1html、css...

波効果を作成するための CSS のトリック

純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。 波形曲線を実現するにはベ...

dockerを使用してGrafana+Prometheus構成をデプロイする

docker-compose-monitor.yml バージョン: '2' ネットワ...

MySQL のファントムリード問題を解決する方法

目次序文1. ファントムリーディングとは何ですか? 2. ファントムリーディングの問題点は何ですか?...

流星効果を実現する JavaScript キャンバス

この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...

VUE ユニアプリライフサイクルに関する簡単な説明

目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...

MySQL 8.0 の新機能の分析 - トランザクション データ ディクショナリとアトミック DDL

序文トランザクション データ ディクショナリとアトミック DDL は、MySQL 8.0 で導入され...

MySQLのバッファプールの詳細な説明

MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...

mysql ビュー関数の分析と使用例

この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...