將圖像綁定到鼠標光標

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