ホームページ > 記事 > ウェブフロントエンド > jquery はマウスの位置をどのようにして知るのでしょうか?
jquery はマウスの位置をどのようにして知るのでしょうか?
- 青灯夜游オリジナル
- 2022-05-23 16:49:431781ブラウズ
方法: 1. "$(document).mousemove(function(e){})" ステートメントを使用して、Web ページにマウス移動イベントを追加し、処理関数を設定します。処理関数では、「e.pageX」および「e.pageY」ステートメントを使用して、マウスの静止位置の X 軸と Y 軸の座標を動的に取得できます。
このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。
jqueryでは、「pageX」属性と「pageY」属性でマウスの滞在位置を取得できます。
pageX プロパティは、ドキュメントの左端を基準としたマウス ポインターの位置です。
pageY プロパティは、ドキュメントの上端を基準としたマウス ポインターの位置です。
つまり、返される値は、X 軸と Y 軸上のマウスの位置です。
ただし、「pageX」属性と「pageY」属性を使用して静的位置を取得するだけで、mousemove() を使用して動的座標を取得できます。
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).mousemove(function(e) {
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
});
</script>
</head>
<body>
<p>鼠标指针位于： <span></span></p>
</body>
</html>
[推奨学習: jQuery ビデオ チュートリアル、Web フロントエンド ビデオ ]
以上がjquery はマウスの位置をどのようにして知るのでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：jQueryでスタイルを追加する方法次の記事：jQueryでスタイルを追加する方法