マウスの尾行効果を実現する JavaScript
|
マウス効果では、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 クライアント/サーバー プロトコルMySQL サーバーから高いパフォーマンスを得る必...
Docker を使用して Nginx+Flask+Mongo アプリケーションをデプロイする
サーバーにはNginx、データベースサポートにはMongo、Python言語のWebフレームワークに...
Docker - コンテナマウントディレクトリを変更する3つの方法のまとめ
方法 1: 設定ファイルを変更する (docker サービスを停止する必要があります) 1. doc...
トラフィックの多いウェブサイト向けのソリューション
まず、サーバーのハードウェアが現在のトラフィックをサポートするのに十分かどうかを確認します。通常の ...
簡単な計算機を実装する小さなプログラム
この記事の例では、簡単な計算機を実装するための小さなプログラムの具体的なコードを参考までに共有してい...
JSブラウザイベントモデルの詳細な説明
目次イベントとは簡単な例イベントをバインドする方法フレームワーク内のイベントイベントオブジェクトイベ...
MySQLでトリガーを作成する方法
この記事の例では、参考のためにMySQLトリガーを作成するための具体的なコードを共有しています。具体...
ウェブデザイナーは適した人材
<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...
JavaScript はチェックボックスの選択機能を実装します
この記事の例では、すべてのチェックボックスの選択を実現するためのJavaScriptの具体的なコード...
Vueはツリー構造の追加、削除、変更、チェックのサンプルコードを実装します
実は多くの会社がユーザー権限ツリーに似た機能を持っています。最近、追加、削除、修正のツリー構造を書き...
MySQL の高度な機能 - データ テーブル パーティショニングの概念とメカニズムの詳細な説明
目次パーティション分割メカニズムSELECTクエリINSERT操作DELETE操作更新操作パーティシ...
インタビューの質問: ホーリー グレイル レイアウトとダブル ウィング レイアウトの違い
序文今日は、聖杯レイアウトとダブルウィングレイアウト、そしてそれらの違いについてお話しします。この2...
mysql mycat ミドルウェアの簡単な紹介
1. mycatとはエンタープライズアプリケーション開発のための完全にオープンソースの大規模データベ...
JSで実施された機雷掃海プロジェクトの概要
この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...
クエリでのMySQLのユニークキーの使用と関連する問題
1. テーブルステートメントを作成します。 テーブル「従業員」を作成します（ `emp_no` in...