跟隨滑鼠移動
阿新 • • 發佈：2021-08-28
學習展示：
頁面大致功能為實現滑鼠移入某區域後，在滑鼠處產生新的區域（提示區域）來進行說明
非藍色區域為滑鼠移入後產生，可跟隨滑鼠在藍色區域移動，其中移入不同區域文字會變化，使用陣列物件儲存
程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload=function(){
var t = document.getElementById("rr");
var pp = document.getElementsByTagName(("a"))
var arr = ["a","b","c","d","e"];
for(var i=0;i<pp.length;i++){
pp[i].index=i;
pp[i].onmouseenter = function(e){
t.style.display="block";
t.innerHTML=arr[this.index];
}
pp[i].onmouseleave = function(){
t.style.display="none";
}
pp[i].onmousemove = function(e){
t.style.left = e.clientX+5+ "px";
t.style.top = e.clientY-5+ "px";
// 這裡設定向後一點是因為定位預設層級提高一級，如果不和滑鼠錯開一點位置的話，滑鼠會觸發離開該頁面的函式onmouseleave，因為這個定位層級會覆蓋原有頁面
}
}
}
</script>
<style>
a{display: block;width: 300px;background-color: blue;height: 100px;}
#rr{display: none;background-color: aquamarine;width: 100px;height: 100px;position: absolute;}
</style>
</head>
<body>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
<a href="">5</a>
<div id="rr">hju</div>
</body>
</html>
基本上就是設定下移入display:block 移出變none
其中設定滑鼠滑動時提示區域的絕對定位隨著滑鼠座標改變，這裡只有一點需要注意：
pp[i].onmousemove = function(e){
t.style.left = e.clientX+5+ "px";
t.style.top = e.clientY-5+ "px";
// 這裡設定向後一點是因為定位預設層級提高一級，如果不和滑鼠錯開一點位置的話，滑鼠會觸發離開該頁面的函式onmouseleave，因為這個定位層級會覆蓋原有頁面
}
也就是這裡，定位提升層級，觸發滑鼠移出函式，所以錯開位置（為什麼我複製下程式碼結果縮排變了）