この記事では、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 データベースの最適化: テーブルとデータベースのシャーディング操作の詳細な説明
まず、href 属性と onclick イベントの実行順序について説明します。マウスが a タグをク...
Flashにより、デザイナーや開発者はブラウザ上でリッチなコンテンツを提供し、動き、インタラクティブ...
前回の記事では、Windows でタイムアウトを試してみました。この記事では、Linux で試してみ...
使用 <div id="アプリ"> <router-link ...
タブバー: 異なるタブをクリックすると異なるコンテンツが表示され、クリックしたタブのスタイルが変更さ...
6つの効果実装コードhtml <h1>CSS 境界遷移</h1> <セ...
序文MySQL が SQL SELECT コマンドと WHERE 句を使用してテーブルからデータを読...
目次1 Apacheの役割2 Apacheのインストール3. Apacheを有効にする4 Apach...
1. dockerfileを作成するときにsshパスワードを設定するには、次のコマンドを使用します。...
必要:公式サイトのリソースサーバーは確かに1つのインスタンスでは使えず、複数のインスタンスを一緒に使...
目次1. 問題のシナリオ2. 原因分析3. 解決策4. 知識を広げる4.1 クエリの最適化を制限する...
iframe の src を 'about:blank' に設定した後、"...
hk_test(ユーザー名、パスワード) に値を挿入 ('qmf1', '...
目次1. 概要1.1 厳密モードとは何ですか? 1.2 厳密モードの目的2. 厳密モードを有効にする...
IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...