網頁座標及應用

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 範圍不同。

今天到此結束了。