次のコードは、マウスの動きにマウスを移動させ、常に緑色DIVを達成することができます
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
body{
border: 1px solid black;
}
div{
height: 10px;
width: 10px;
background-color: green;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.onmousemove = function(){
var oDiv = document.getElementById('div1');
oDiv.style.left = event.clientX+'px';
oDiv.style.top = event.clientY+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>実際には、上記の例そのような高さ= 2000pxとして複数のページレイアウトの高さは、ページトラッキングエラーを摺動するscrollTopスプライトは、この問題を解決する参加次いで、生じるリスクがあります
<!DOCTYPE html>
<html>
<head>
<title>学习事件</title>
<style type="text/css">
body{
border: 1px solid black;
height: 2000px;
}
div{
height: 10px;
width: 10px;
background-color: green;
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
document.onmousemove = function(){
var oDiv = document.getElementById('div1');
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
oDiv.style.left = event.clientX+'px';
oDiv.style.top = event.clientY+scrollTop+'px';
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
