<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style:none;
}
#box{
width: 50px;
height: 200vh;
background-color: #fa0;
display: inline-block;
vertical-align: top;
}
span{
color: darkRed;
}
.words{
margin: 0 0 0 10px;
display: inline-block;
vertical-align: top;
position: fixed;
}
</style>
</head>
<body>
<div id="box"></div>
<div class="words">
<div>離螢幕左上角左距 <span id="screenX"></span> </div>
<div>離螢幕左上角上距 <span id="screenY"></span> </div>
<div>（所以是雙螢幕的話就會很寬，整個衝破瀏覽器）</div>
<br>
<div>離整個html最左上角左距 <span id="pageX"></span> </div>
<div>離整個html最左上角上距 <span id="pageY"></span> </div>
<div>（所以卷軸往下滾時，高會不斷累加）</div>
<br>
<div>距離目前視窗左上角左距 <span id="clientX"></span> </div>
<div>距離目前視窗左上角上距 <span id="clientY"></span> </div>
</div>
<script type="text/javascript">
document.getElementById('box').onmouseover=function(e){
document.getElementById('screenX').innerHTML=e.screenX;
document.getElementById('screenY').innerHTML=e.screenY;
document.getElementById('pageX').innerHTML=e.pageX;
document.getElementById('pageY').innerHTML=e.pageY;
document.getElementById('clientX').innerHTML=e.clientX;
document.getElementById('clientY').innerHTML=e.clientY;
}
</script>
</body>
</html>
全站熱搜
留言列表
伺服器架設 (1)
