javascript - 画像をマウスカーソルにバインドする

Question

jQueryを使用してマウスカーソルと一緒に画像をバインドしたいと思います。

次のコードはFirefoxで動作しますが、IE8では動作しません。

$('#cursor').css({
       left:  e.pageX,
       top:   e.pageY
    });
//"cursor" is the id of the <img>.

そうするための代替手段はありますか？

Answer 1

イベントリスナーをバインドするためにjQueryを使用していないようです。IEの場合、マウス座標に使用するプロパティは次のとおりですe.clientX。e.clientY

if(typeof e.pageX !== "undefined"){
    $('#cursor').css({
           left:  e.pageX,
           top:   e.pageY
    });
} else {
    $('#cursor').css({
           left:  e.clientX,
           top:   e.clientY
    });
}

もちろん、jQueryを使用してリスナーをバインドする場合、jQueryでバインドされたハンドラーに渡されるイベントオブジェクトのマウス座標は、pageXおよびpageYプロパティのクロスブラウザーで正規化されているため、これについて心配する必要はありません。

$('document').mousemove(function (evt) {
    $('#cursor').css({
       left:  evt.pageX,
       top:   evt.pageY
    });
});

Answer 2

試す：

$('#cursor').css({'top': e.clientY, 'left': e.clientX});

Answer 3

その位置を絶対に設定し、上と左の属性を操作してみてください。次のようにjQueryでそれを行うことができます：

$("#cursor").css({"position":"absolute","left":e.pageX+"px","top":e.pageY+"px"});

または、プレーンな古い Javascript を使用して、次のようにすることもできます。

document.getElementById("cursor").style.position = "absolute";
document.getElementById("cursor").style.left = e.pageX+"px";
document.getElementById("cursor").style.top = e.pageY+"px";

ただし、IE のバージョンによっては、pageX と pageY ではなく clientX と clientY を使用する必要がある場合があります。