JavaScript-滑鼠獲取頁面座標

滑鼠事件物件

滑鼠事件物件	說明
e.clientX	返回滑鼠相對於瀏覽器視窗可視區的 X 座標
e.clientY	返回滑鼠相對於瀏覽器視窗可視區的 Y 座標
e.pageX	返回滑鼠相對於文件頁面的 X 座標 IE9+支援
e.pageY	返回滑鼠相對於文件頁面的 Y 座標 IE9+支援
e.screenX	返回滑鼠相對於電腦螢幕的 X 座標
e.screenY	返回滑鼠相對於電腦螢幕的 XY座標

• 效果演示

  

• css原始碼

   img {
              position: absolute; // **
              width: 160px;
          }
  

• html結構

  <div>
          <img src="img/mousemove.png" alt="">
  </div>
  

• JS原理分析

    <script>
          // 獲取元素 img
          var photo = document.querySelector('img');
          document.addEventListener('mousemove', function (e) {
              // pageX  pageY
              var photoX = e.pageX + 'px';
              var photoY = e.pageY + 'px';
              // 給圖片新增 style 改變 left top
              photo.style.left = photoX;
              photo.style.top = photoY;
          });