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

尝试将其位置设置为绝对值并操纵顶部和左侧属性。您可以使用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。

Answer 3

尝试：

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

将图像绑定到鼠标光标

3 个答案: