マウス効果では、setTimeout を使用して固定時間にノードを生成し、ノードを削除し、生成されたノードにランダムな幅、高さ、色を割り当てて、各効果ノードの外観を異ならせる必要があります。 注: 生成されたノードは、ドキュメント フローの外側に配置され、ページ上の他の要素の位置に影響を与えないように、絶対的に配置する必要があります。 コード例: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>マウス効果</title> <スタイル> * { マージン: 0; パディング: 0; } 体 { 背景色: #9df; オーバーフロー: 非表示; 高さ:100vh; } スパン { 高さ: 30px; 幅: 30ピクセル; 境界線の半径: 50%; 位置: 絶対; ポインタイベント: なし; 変換: translate(-50%, -50%); ボックスの影: 10px 10px 30px #45f, -10px -10px 30px #d80; アニメーション: ボックス 5 秒 線形無限; zインデックス: 3; } @keyframes ボックス { 0% { 変換: translate(-50%, -50%); 不透明度: 1; フィルター: 色相回転(0度); } 100% { 変換: translate(-50%, -1000%); 不透明度: 1; フィルター: 色相回転(720度); } } </スタイル> </head> <本文> </本文> </html> <スクリプト> document.addEventListener("mousemove", 関数(e) { var 本文 = document.querySelector("本文"); var span = document.createElement("span"); var x = e.offsetX var y = e.offsetY span.style.left = x + "px" span.style.top = y + "px"; コンソールログ(x + ">>>" + y) var a = Math.random() * 30; span.style.width = 30 + a + "px"; span.style.height = 30 + a + "px"; body.appendChild(span); setTimeout(関数() { span を削除します。 // コンソールログ("ok") }, 4500) }) </スクリプト> 実行結果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ストアド プロシージャと共通関数のコード分析
>>: Linux Zabbixカスタム監視およびアラーム実装プロセスの分析
目次MySQL クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...
サーバーにはNginx、データベースサポートにはMongo、Python言語のWebフレームワークに...
方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...
まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...
この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...
目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...
この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...
<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...
この記事の例では、すべてのチェックボックスの選択を実現するためのJavaScriptの具体的なコード...
実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...
目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...
序文今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2...
1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...
この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...
1. テーブルステートメントを作成します。 テーブル「従業員」を作成します( `emp_no` in...