1

我想使用 jQuery 将图像与鼠标光标绑定。

以下代码适用于 Firefox，但不适用于 IE8。

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

我们有替代方案吗？

4

3 回答 3

2

我怀疑你没有使用 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
    });
});
于 2013-01-07T06:07:40.183 回答
0

尝试将其位置设置为绝对并操作顶部和左侧属性。你可以像这样使用 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 的版本，您可能需要使用 clientX 和 clientY 而不是 pageX 和 pageY。

于 2013-01-07T06:07:56.873 回答
0

尝试：

$('#cursor').css({'top': e.clientY, 'left': e.clientX});
于 2013-01-07T06:08:30.820 回答