网页座标及应用

1. 首先怎麽读取与显示座标。
2. 座标的判断依据。
3. 如何动态撷取浏览器宽高。

mousemove 事件

1. 使用滑鼠移动产生事件

//html
<div class="box">  </div>

//css
.box{
  background: red;
  height: 200px;
  width: 200px;
  position: absolute;
}

//js
const el = document.querySelector('.box');

el.addEventListener('mousemove',function(){
    alert('被发现了!');
  },false);

座标判断依据

1. screen : 依据萤幕解析度来判断。
2. page : 依据网页页面来判断。
3. client : 依据浏览器窗口来判断

//html
<div class="mouseImg">
  <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>  

//css
.mouseImg {
  max-width: 1920px;
  height: 5000px;
}

//js
const screenX = document.querySelector('.screenX');        
const screenY = document.querySelector('.screenY');        
const pageX = document.querySelector('.pageX');        
const pageY = document.querySelector('.pageY');        
const clientX = document.querySelector('.clientX');        
const clientY = document.querySelector('.clientY');        
const mouseImg = document.querySelector('.mouseImg');

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; 
  
  mouseImg.style.left =e.clientX+'px';
  mouseImg.style.top =e.clientY+'px';             
}

const el = document.body;      
el.addEventListener('mousemove', getPosition, false); 

1. screen : 依据萤幕解析度来判断。红色的框。
2. page : 依据网页页面来判断。绿色的X/Y轴，完整的页面大小。
3. client : 依据浏览器窗口来判断。紫色的框。

动态撷取浏览器宽高

 <div class="section"></div>
 <div class="section2">
    section2
 </div>

.section{
    height: 400px;
    background-image: url(https://i.imgur.com/fSjapb2.png);
    background-size: cover;
    background-position: top center
}
.section2{
    height: 250px;
    background-color: pink;
}

document.querySelector('.section').style.height = window.innerHeight+"px"

window.onresize = function(){
document.querySelector('.section').style.height = window.innerHeight+"px"
}

innerHeight 与 outerHeight 范围不同。

今天到此结束了。