将图像绑定到鼠标光标

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属性跨浏览器归一化：

​​

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});