この記事では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明
最近、特に異常なビジネス需要があり、テーブルがあります テーブル「デモ」を作成します( `id` i...
g++ を使用して初めて cpp ファイルをコンパイルしたとき、未定義の参照エラーが報告されました。...
この文の目的は何ですか?コードをコピーコードは次のとおりです。 <link rel="...
目次1. 概要2. ログインインターセプションを実装するためのルーティングナビゲーションガード1. ...
厳密に言えば、nginx には負荷分散バックエンド ノードのヘルス チェック機能はありませんが、デフ...
1. ナビゲーション: 順序なしリストとその他のラベル要素ナビゲーションを記述するために最も一般的に...
WEB開発は主に2つのインタラクション(B/Sデータ)から構成されますブラウザ: 1html、css...
純粋な CSS を使用して波の効果を実現することは、常に非常に困難でした。 波形曲線を実現するにはベ...
docker-compose-monitor.yml バージョン: '2' ネットワ...
目次序文1. ファントムリーディングとは何ですか? 2. ファントムリーディングの問題点は何ですか?...
この記事では、JavaScriptキャンバスで流星の特殊効果を表示するための具体的なコードを参考まで...
目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...
序文トランザクション データ ディクショナリとアトミック DDL は、MySQL 8.0 で導入され...
MySQL のデータはディスクに書き込む必要があることは誰もが知っています。ディスクの読み取りと書き...
この記事では、例を使用して MySQL ビューの機能と使用方法を説明します。ご参考までに、詳細は以下...