JavaScript でクールなマウステーリング効果を実装

これを見た後、あなたにも手ができて、さまざまな美しい小さなしっぽを作れるようになることを保証します!

完全なコードは次のとおりです。コメントを見れば簡単に理解できます。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <title>タイトル</title>
<スタイル>
    /*div スタイル*/
    ＃主要{
        幅: 自動;高さ: 1500px;余白: 0;背景色: 黒;
    }
</スタイル>
</head>
<本文>
        <div id="メイン"></div>
 <スクリプト>
    //===========マウス惑星のしっぽ JS コード============

    //========機能: 現在のマウス座標を取得する=========
     関数 getMousePosition(イベント) {
         var x = 0; //x 座標 var y = 0; //y 座標 //documentElement はドキュメントのドキュメント要素を返します。
         doc = ドキュメント.documentElement;
         //body はドキュメントの body 要素を返します body = document.body;
         //互換性を解決する if (!event) event = window.event;
         //マウスホイールを回した後の相対座標の差を解きます //pageYoffset は Netscape に固有です if (window.pageYoffset) {
             x = ウィンドウのページXオフセット;
             y = ウィンドウのYオフセット;
         } else{//その他のブラウザのマウススクロール x = (doc && doc.scrollLeft || body && body.scrollLeft || 0)
                 - (doc && doc.clientLeft || body && body.clientLeft || 0);
             y = (doc && doc.scrollTop || body && body.scrollTop || 0)
                 - (doc && doc.clientTop || body && body.clientTop || 0);
         }
         // イベントがトリガーされたときのブラウザ ページ (またはクライアント領域) に対するマウス ポインターの相対的な水平座標と取得した x の合計 x += event.clientX;
         // イベントがトリガーされたときのブラウザ ページ (またはクライアント領域) に対するマウス ポインターの取得された x と垂直座標 y の合計 += event.clientY;
         //xとyを返す
         {'x': x, 'y': y} を返します。
     }
     //========機能: 現在のマウス座標を取得する=========

     //=====minNumからmaxNumまでの乱数を生成します=====
    関数 randomNum(minNum,maxNum){
        スイッチ(引数.長さ){
            ケース1:
                parseInt(Math.random()*minNum+1,10) を返します。
            ケース2:
                parseInt(Math.random()*(maxNum-minNum+1)+minNum,10) を返します。
            デフォルト：
                0を返します。
        }
    }
    //=====minNumからmaxNumまでの乱数を生成します======

    //======マウス移動イベントをドキュメント全体にバインドする======
    document.onmousemove = 関数(イベント){

        // ページにタグを作成します (ここではカスタム タグ styleImg を作成します)
        var styleImg = document.createElement("div");
        // 1～5 の乱数を取得し、その乱数に応じてラベル スタイルを設定します。var r = randomNum(1,5);
        スイッチ（r）{
            ケース1:
                //画像のパスを設定します。パスに応じて異なるスタイルに変更できます styleImg.innerHTML="<img src='../static/muban/images/xing01.png' style='width: 50px;height: auto;'/>"
                壊す;
            ケース2:
                styleImg.innerHTML="<img src='../static/muban/images/xing02.png' style='width: 50px;height: auto;'/>"
                壊す;
            ケース3:
                styleImg.innerHTML="<img src='../static/muban/images/xing03.png' style='width: 50px;height: auto;'/>"
                壊す;
            ケース4:
                styleImg.innerHTML="<img src='../static/muban/images/xing04.png' style='width: 50px;height: auto;'/>"
                壊す;
            ケース5:
                styleImg.innerHTML="<img src='../static/muban/images/xing05.png' style='width: 50px;height: auto;'/>"
                壊す;
        }
        // アニメーションを設定するには、左と上を設定する必要があります。配置を設定する必要があります styleImg.style.position = 'absolute'
        // ラベルの初期位置、つまりマウスの現在の位置を設定します。var x = getMousePosition(event).x;
        var y = getMousePosition(イベント).y;
        // styleImg の座標を設定します styleImg.style.top = y + "px";
        styleImg.style.left = x + "px";
        //現在のマウステールが有効な領域に testDiv をバインドします var testDiv = document.getElementById("main");
        // ページの body タグに新しいタグを追加します testDiv.appendChild(styleImg);
        // ドキュメント内の制限を超えるものは表示されないので、ページ上の div にバインドしてみてください // マウスの移動中に上下のスクロール バーがトリガーされないように、overflow を hide に設定します testDiv.style.overflow = 'hidden';
        //
    	var カウント = 0;
    	//setInterval() メソッドは、指定された期間 (ミリ秒単位) で関数を呼び出したり、式を計算したりします。var time = setInterval(function(){
        // 指定された期間内に生成された各ラベルの対応する透明度を変更するタイマーを設定します。count += 5;
            styleImg.style.opacity = (100-カウント)/100;
        }, 30)
        // setTimeout() メソッドは、指定されたミリ秒数後に関数を呼び出したり、式を計算したりするために使用されます。
        // 遅延タイマーを設定し、一定時間後に上記のタイマーをクリアして、作成されたラベルが変更されないようにします setTimeout(function(){
            // clearInterval() を使用して setInterval 関数の実行を停止します。clearInterval(time);
            // 作成されたタグを削除します testDiv.removeChild(styleImg);
        },250)
    }
    </スクリプト>
</本文>
</html>

追記: 上記のコードは、さまざまなドキュメントを参考にして自分で書いたものです。VC 用のブログを書いたわけではありません。

最後に、画像素材をお渡しします。上記のコードに簡単な変更を加えるだけで、他のスタイルの小さなしっぽを実現できます。

JavaScript でクールなマウステール効果を実現する方法についての記事はこれで終わりです。JavaScript マウステール効果に関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: