用户投稿整理网页座标 了解 screen、page、client 差异
screen : 整个萤幕的解析度大小page : 整个网页内容长度client : 浏览器窗口的大小event 物件能够告诉你当事件被触发，游标所在位置。
显示 screen、page、client X跟Y轴的数字
<div class="header"> <p> screenX: <span class="screenX"></span> screenY: <span class="screenY"></span> </p> <p> pageX: <span class="pageX"></span> pageY: <span class="pageY"></span> </p> <p> clientX: <span class="clientX"></span> clientY: <span class="clientY"></span> </p> </div> ２．宣告 screen、page、client X跟Y轴
let screenX =document.querySelector('.screenX');let screenY =document.querySelector('.screenY');let pageX =document.querySelector('.pageX');let pageY =document.querySelector('.pageY');let clientX = document.querySelector('.clientX'); let clientY = document.querySelector('.clientY'); 3.命名getPosition的 function，用textContent来对应各自数值
function getPosition(e){ screenX.textContent = e.screenX; screenY.textContent = e.screenY; pageX.textContent = e.pageX; pageY.textContent = e.pageY; clientX.textContent = e.clientX; clientY.textContent = e.clientY; }4.宣告el指定body，并监听滑鼠移动
var el = document.body; el.addEventListener('mousemove', getPosition, false); 练习滑鼠指标黏住一颗球，随着滑鼠移动跟着移动，透过clientX跟Y轴的数字，等同于球的上边左边距离边线的数值
滑鼠指标通常是左上角开始计算
５．建构一颗球与CSS
//Html<body> <div class="mouseball"></div></body>//Css.mouseball{ width: 50px; height: 50px; position: fixed; //固定网页位置 border-radius:50% 50%; background: #000;}6.JS部分，先宣告clientX轴跟Ｙ轴，再来那颗球
var clientX = document.querySelector('.clientX'); var clientY = document.querySelector('.clientY'); var mouseBall = document.querySelector('.mouseball');７．
命名getPosition的 function，
function getPosition(e) { clientX.textContent = e.clientX; clientY.textContent = e.clientY; mouseBall.style.left =e.clientX+'px'; mouseBall.style.top =e.clientY+'px'; }８．宣告el指定body，并监听滑鼠移动
var el = document.body; el.addEventListener('mousemove', getPosition, false); 
微信扫一扫打赏
支付宝扫一扫打赏
