マウスの尾行効果を実現する JavaScript

マウスの尾行効果を実現する 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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript における一般的な配列操作
  • JavaScript の async と await のシンプルで詳細な学習
  • 古典的なスネークゲームの JavaScript 実装
  • 組み込みオブジェクトに関するJavascriptの基礎
  • JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明
  • Python コルーチンと JavaScript コルーチンの比較
  • シンプルなドラッグ効果を実現するJavaScript
  • JavaScript配列重複排除の詳細な説明
  • 航空機戦争ゲームを実装するためのJavaScript
  • JavaScript setinterval 1秒遅延ソリューション
  • JavaScriptアップロードファイル制限パラメータケースの詳細な説明
  • JavaScript 変数の昇格についての簡単な説明
  • JavaScriptイベント実行メカニズムの深い理解
  • プロジェクトに必須の 8 つの JavaScript コード スニペット

<<:  MySQL ストアド プロシージャと共通関数のコード分析

>>:  Linux Zabbixカスタム監視およびアラーム実装プロセスの分析

推薦する

SELinux 入門

カーネル 2.6 の時代には、アクセス制御セキュリティ ポリシーのメカニズムを提供するために新しいセ...

CentOS7 インストール GUI インターフェースとリモート接続の実装

ブラウザ (Web ドライバー) ベースの Selenium テクノロジを使用してデータをクロールす...

Linux コマンドラインで電卓を使用する 5 つのコマンド

みなさんこんにちは。私は梁旭です。 Linux を使用するときに、計算を行う必要がある場合があり、そ...

MySQLデータベースで外部キー制約を使用する必要があるかどうかの詳細な説明

1. はじめに外部キー制約を使用するかどうかという話題は、すでに決まり文句になっています。学校では、...

Win10 MySQLでCSVをエクスポートする2つの方法

Win10 で csv をエクスポートする方法は 2 つあります。1 つ目はツールを使用することです...

Vue3.0 でページング コンポーネントを手動でカプセル化する方法

この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...

IE6では画像要素imgに余分な空白スペースがある

ページの DIV+CSS レイアウトを行う際、IE6 で画像要素 img の下に余分なスペースができ...

vue3+ts+EsLint+Prettier 標準コード実装

目次使用EsLintの使用プロフィールを追加するPrettierの使用huskyとlint-stag...

Vue Element UIの使用時に遭遇した問題をまとめる

目次1. DateTimePickerの日付選択範囲は現在時刻とそれ以前です2. DateTimeP...

CSS で実現される HTML 背景色のグラデーション

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

VMware12 に CentOS8 をインストールする方法 (VM 仮想マシンに CentOS8 をインストールするチュートリアル)

数日前に CentOS8 がリリースされました。8 の最初のバージョンですが、今日は VM12 に ...

Vueはリストのシームレスなスクロールを実装します

この記事の例では、リストのシームレスなスクロールを実現するためのvueの具体的なコードを参考までに共...

古い Vue プロジェクトに Vite サポートを追加する方法

1. はじめに会社のプロジェクトを引き継いで2年になります。今では毎回プロジェクトを起動するのに1分...

きちんとしたHTMLマークアップを使用してページを構築します

インターネットは絶えず進化する有機体です。長期にわたってインターネットの発展に適応できるページを構築...

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明

JDBCデータベースリンクと関連メソッドのカプセル化の詳細な説明MySQL データベースを使用して、...