初學js---獲取鼠標在頁面中的位置
阿新 • • 發佈：2018-07-31
page element title 觸發事件 ctype 通過 body ntb utf-8
e=e ||window.event; //兼容性問題
img.style.position=‘absolute‘;
圖片跟著鼠標移動：
1.獲取鼠標在頁面中的位置：（pageX/pageY獲取鼠標在頁面中的位置）
2.通過id或者其他方法找到圖片，然後讓圖片的位置變為和鼠標位置相同，註意要先讓圖片脫離文檔，即設置position:absolute.
完整代碼：
<!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>
初學js---獲取鼠標在頁面中的位置