マウス移動に伴うjQueryレイヤー効果の実装方法_jquery

この記事の例では、jQuery がマウスの動きに追従するレイヤー効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

1. 基本的な目標

マウスの動きに従うレイヤーを作成します。

現在のマウス位置がレイヤーに表示されます。

以下に示すように:

このレイヤーが JavaScript の代わりに jQuery を使用する理由は、jQuery コードが現在の主流ブラウザーすべてと簡単に互換性があるためです。少なくとも IE8 では、互換性のために使用されるコードの大きなセクションは必要ありません。

2. 製造工程

この実験の中心となるのは、jquery の Mousemove イベントです。

マウスが動くとトリガーされます。

コードは次のとおりです:

コードをコピー コードは次のとおりです:

<スクリプト>
/*e.pageX と e.pageY のペアは、マウスの現在の座標を取得できます。e 仮パラメータは最初の関数宣言で使用されることに注意してください*/
$(document).mousemove(function (e) {
変数 x;
変数
var xy="
x 座標: " e.pageX "、y 座標: " e.pageY
x=e.pageX;
y=e.pageY;
ドキュメント .getElementById("mousePosition").style.left = x "px"; ドキュメント .getElementById("mousePosition").style.top = y "px"; $("#mousePosition").html(xy); })






この記事が皆さんの jQuery プログラミングに役立つことを願っています。