需求 通過JavaScript使盒子跟隨著滑鼠的移動而移動,並且當頁面出現滾動條時,盒子也會跟隨滑鼠正常移動(相容IE8) 代碼 ...
需求
通過JavaScript使盒子跟隨著滑鼠的移動而移動,並且當頁面出現滾動條時,盒子也會跟隨滑鼠正常移動(相容IE8)
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div跟隨滑鼠移動</title>
<style>
div{
width: 200px;
height: 200px;
background-color: skyblue;
/*註意此處需要設置盒子的定位方式,否則後面設置盒子的偏移量無效*/
position: absolute;
}
body{
width: 2000px;
height: 2000px;
}
</style>
<script>
window.onload = function () {
let box = document.getElementById("box");
let odj = document.documentElement;
odj.onmousemove = function (event) {
// 解決IE8對event的相容性問題
event = event || window.event;
// 解決body和documentElement的相容性問題(谷歌瀏覽器和其他瀏覽器的相容性)
var st = document.body.scrollTop || document.documentElement.scrollTop;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//設置盒子的水平偏移量 註意需要加上單位
box.style.left = event.clientX + sl + "px";
//設置盒子的垂直偏移量
box.style.top = event.clientY + st + "px";
};
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>