iT邦幫忙

2021 iThome 鐵人賽

DAY 0
0
自我挑戰組

從零開始學習 JS 的連續-30 Days-系列 第 29

[Day 29]從零開始學習 JS 的連續-30 Days---網頁座標及應用

網頁座標及應用

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

今天到此結束了。


上一篇
[Day 28]從零開始學習 JS 的連續-30 Days---BOM-瀏覽器物件模型(下)
下一篇
[Day 30]從零開始學習 JS 的連續-30 Days---連續30天的"遺憾賽程"!!
系列文
從零開始學習 JS 的連續-30 Days-30

尚未有邦友留言

立即登入留言