4

次のように、divのマウス座標を取得したい:

$("#box").mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

document.getElementById("coords").innerHTML = x + ", " + y; });

しかし、カーソルが左または右に移動したかどうかも確認できるようにしたいと考えています。現在のマウスの位置を以前の位置と比較するだけでよいことはわかっていますが、この場合の方法がわかりません。

どんな助けでも感謝します。ありがとうございました

4

2 に答える 2

14

マウスの位置を取得するjqueryコードは次のとおりです

jQuery(document).ready(function(){

   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

明らかに、「ステータス」という div が必要です。

<div id="status">0, 0</div>

カーソルが左に移動しているか右に移動しているかを確認するには、以前の位置を保存してから、新しい位置と比較する必要があります。

ここに完全な例を書きました：

http://jsfiddle.net/cB9Wq/

_ 編集：

div 内の座標を取得する必要がある場合は、div の位置も知る必要があります。

$(".div_container").mousemove(function(e){
        var relativeXPosition = (e.pageX - this.offsetLeft); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
        var relativeYPosition = (e.pageY - this.offsetTop);
        $("#header").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
    }).mouseout(function(){
        $("#header").html("<p>Move mouse on the below blue div container! :)</p>")
    });

マウスが左に移動するか右に移動するかを確認するために、次の構文を使用しました。

xPrev<e.pageX ? $('#lr').html("right") : $('#lr').html("left");
xPrev=e.pageX;

注意: これは以下と同等です:

if(xPrev<e.pageX) { 
   $('#lr').html("right"); 
}
else {
   $('#lr').html("left"); 
}
xPrev=e.pageX;

ここに実際の例があります：http://jsfiddle.net/cB9Wq/2/

于 2012-12-27T00:08:14.527 に答える