提姆寫程式

0%

JS 筆記 - 網頁座標 Screen、Page、Client

發表於 分類於 Disqus：
將滑鼠改成老鷹並且可翱翔在網頁上

JavaScript Note

在開發人員工具中 MouseEvent 會看到第一排有這幾個資訊:

  • ScreenX
  • ScreenY
  • pageX
  • pageY
  • clientX
  • clientY

分別記錄這些名稱的意思。

X, Y 軸

X 代表橫軸。
Y 代表直軸。

Screen

英文單字中為螢幕的意思，在網頁中代表整個螢幕尺寸大小。

Page

英文單字中為頁面的意思，在網頁中代表整個頁面大小，如果有一個遊戲頁面是往下或往上移動的遊戲，在 pageY 的數字就會非常大，因為在 height 可能會設定很長。

EX. 雪人兄弟 或是 小朋友下樓梯。(暴露年紀)

Client

英文單字中為客戶的意思，在網頁中代表當前的頁面位置，所以又跟 Screen、Page 不同，是計算目前瀏覽器所見的大小，所以如果任意調整瀏覽器視窗大小， Client 的 X、Y 值也會跟著變化。

練習主題

設定一個 height:5000px; 的頁面，並透過 JS 的滑鼠事件( mousemove )顯示 Screen、Page、Client 相關數值。

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="wrap">
   <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>
 </div>

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.wrap {
  max-width: 1920px;
  height: 5000px;
  background-image: url(https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-color: lightblue;
  background-size: 100%;
}
.header {
  height: auto;
  position: fixed;
  top: 0;
  width: 100%;
  color: #fff;
  text-align: center;
  background: green;
}
.header p {
  padding: 0.5em;
}

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var screenX = document.querySelector(".screenX");
var screenY = document.querySelector(".screenY");
var pageX = document.querySelector(".pageX");
var pageY = document.querySelector(".pageY");
var clientX = document.querySelector(".clientX");
var clientY = document.querySelector(".clientY");

var el = document.body;
el.addEventListener("mousemove", getPosition, false);

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;
}

codepen: https://codepen.io/hnzxewqw/pen/GRJmVvN

相關應用

很多遊戲使用圖片替代游標的方式來玩，這次就做個練習:

在原本的 HTML 的 .wrap 下方加上這行，將圖片寬度變成 width="300"，並插入一張 png 圖片代替滑鼠用:

HTML

1
2
3
<div class="mouseImg">
    <img width="300" src="https://url.joor.net/Oc">
  </div>
  • png 圖片可以呈現去背效果，才不會有白色背景。
  • 圖片是用短網址修改後的連結，純粹為了版面好看。

將滑鼠游標隱藏，在 CSS 的 body ，將游標改成不顯示:

CSS

1
2
3
body {
  cursor: none;
}

利用 JS 選取到 mouseImg，並在 function 中加入下方兩行程式碼控制游標位置:

JavaScript

選取 .mouseImg:

1
var mouseImg = document.querySelector(".mouseImg"); //新增滑鼠游標

在 function 加入控制游標位置，動態修改 CSS 中的 left 與 top 的值:

1
2
mouseImg.style.left = e.clientX + "px"; //滑鼠游標 X 軸
mouseImg.style.top = e.clientY + "px"; //滑鼠游標 Y 軸

透過開發人員工具可以看到 Element 中 style 的數值，會與 Client 值相同。

可以在 codepen 玩玩看: https://codepen.io/hnzxewqw/pen/MWwmNVz

  • 透過滑鼠滾輪上下捲動視窗，可以移動圖片位置。
  • 透過滑鼠游標任意移動位置，可以控制老鷹圖案。