2

マウスをドキュメントの上部に垂直に置き、ドキュメントの中央を水平に置いたときに関数を実行する方法はありますか？

マウスがトップセンターに近づいたときに、そのjsコード/関数を実行するのはどうですか？

これが私がこれを行うことをどのように考えるかです（jQueryとvanilla jsで）が、より良い方法があれば共有してください：

$(document).mousemove(
    function(e){
        if((e.pageY=0) && (e.pageX=)){
            //run function
        }
    }
}

条件でe.pageXが等しいはずのものを残した理由は、50％または中間の方法がわからないためです。

また、これはマウスが正確に上部と中央にある場合にのみ機能を実行すると思います。

マウスがトップセンターに近づくにつれて徐々に実行することを知っている人はいますか？

4

2 に答える 2

2

これが私が今考えた超簡単な解決策です。HTMLに空divを入れ、適切に配置し、で非表示にし、イベントopacity: 0をリッスンします。mouseover

<div class="detector"></div>

CSS：

.detector {
    position: absolute; // or fixed, depending on needed behaviour
    top: 10px;
    left: 50%;
    height: 20px;
    width: 20px;
    margin-left: -10px;
    opacity: 0;
}

JS：

$('.detector').mouseover(function() {
    alert('Mousemove detected!');
});

http://jsfiddle.net/MhPp8/

于 2013-03-09T18:10:50.993 に答える
1

次のコードを試すことができます。ブラウザウィンドウのサイズが変更されることを期待しない場合は、更新のたびにウィンドウ幅を検索しないように、バインディング$(window).width()/2の外側の変数に割り当てることができることに注意してください。またはmousemoveの使用は、10進数を避けるために、計算された水平方向の中心を切り捨て/切り上げるために必要です。Math.floorMath.ceil

例1（水平方向の中心は動的です。マウスを動かすと常に再計算されます）：

$(document).on('mousemove',function(e){
    if((e.pageY==0) && (e.pageX==Math.floor($(window).width()/2))){
        //run function
    }
});

例2（水平中心は静的なままです。つまり、実行時に計算された値です）：

var hCenter = Math.floor($(window).width()/2);
$(document).on('mousemove',function(e){
    if((e.pageY==0) && (e.pageX==hCenter)){
        //run function
    }
});

例3（ウィンドウのサイズ変更時にhCenterを更新）：

// calculate horizontal center at page load
var hCenter = Math.floor($(window).width()/2);

// update hCenter every time the window is resized
$(window).resize(function(){
    hCenter = Math.floor($(window).width()/2);
});

$(document).on('mousemove',function(e){
    if((e.pageY==0) && (e.pageX==hCenter)){
        //run function
    }
});
于 2013-03-09T18:19:58.560 に答える