初學js---獲取鼠標在頁面中的位置

時間 2019-11-11

原文原文鏈接

圖片跟着鼠標移動：html

1.獲取鼠標在頁面中的位置：（pageX/pageY獲取鼠標在頁面中的位置）spa

2.經過id或者其餘方法找到圖片，而後讓圖片的位置變爲和鼠標位置相同，注意要先讓圖片脫離文檔，即設置position:absolute.htm

完整代碼：blog

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取鼠標的位置</title>
</head>
<body>
<img id="img" src="../img/天使.png"/ style="width:50px;height:50;">
<script>
var img=document.getElementById('img');
document.onmousemove=function(e){ //當鼠標移動的時候觸發事件
e=e ||window.event; //兼容性問題
img.style.position='absolute';
事件

//pageX/pageY獲取鼠標在頁面中的位置
img.style.left=e.pageX+'px';
img.style.top=e.pageY+'px';;
}
</script>

</body>
</html>圖片

相關標籤/搜索