はじめに

こんにちは！@70days_jsです。

14日目に、マウスの動きに合わせて黒い丸を表示したかったけどできませんでした。
今日はそのリベンジです。

48日目。(2019/12/5)
よろしくお願いします。

サイトURL

やったこと

主に2つのことをやりました。

マウスに合わせて画像が付いてくる
マウスの軌跡を描く

では1から説明していきます。

1. マウスに合わせて画像が付いてくる

html全体↓

  <body>
    <div id="mouseMove">
      <div id="positionDisplay"></div>
      <img src="day48men.png" id="men" class="position" />
      <img src="day48doctor.png" id="doctor" class="position" />
    </div>
  </body>

css全体↓　

body {
  margin: 0;
  overflow: hidden;
}

# mouseMove {
  height: 100vh;
  width: 100vw;
}

.position {
  position: absolute;
  height: 50px;
  width: 50px;
  transform: translateY(-50%) translateX(-50%);
}

.dot {
  position: absolute;
  background-color: black;
  width: 3px;
  height: 3px;
}

# men {
  top: -100%;
  left: -100%;
}

# doctor {
  top: -100%;
  left: -100%;
}

JavaScript 全体↓

let mouseX = 0;
let mouseY = 0;
let mouseMove = document.getElementById("mouseMove");
let positionDisplay = document.getElementById("positionDisplay");
let men = document.getElementById("men");
let doctor = document.getElementById("doctor");
let x;
let y;

mouseMove.addEventListener("mousemove", function(e) {
  x = e.pageX;
  y = e.pageY;
  let coordinate = " (X座標：" + x + " Y座標：" + y + ")";
  positionDisplay.innerHTML = coordinate;
  doctor.style.top = y + "px";
  doctor.style.left = x + "px";
  men.style.top = y + 25 + "px";
  men.style.left = x + 30 + "px";
  let div = document.createElement("div");
  div.setAttribute("class", "dot");
  div.style.top = y + "px";
  div.style.left = x + "px";
  mouseMove.appendChild(div);
});

#mouseMove {
height: 100vh;
width: 100vw;
}

id="mouseMove"のdivを画面いっぱいに広げて、その中で検知するようにしています。
bodyではなく、divを作って設定しておくことで、mouseMoveの大きさを変えるだけで、いつでも表示したい範囲を調整できるようになります。

.position {
position: absolute;
height: 50px;
width: 50px;
transform: translateY(-50%) translateX(-50%);
}

.positionクラスで画像の位置をabsoluteにしています。
transformは画像の表示場所をマウスの中心に置くために付けています。

位置の検知はJavaScriptで、mousemoveイベントを使い、pageXとpageYのプロパティから取得しています。

mouseMove.addEventListener("mousemove", function(e) {
x = e.pageX;
y = e.pageY;

マウスに画像が付いてくるのは、スタイルのtopとleftをpageXとpageYの値に変えてやるだけです。

doctor.style.top = y + "px";
doctor.style.left = x + "px";

2. マウスの軌跡を描く

これもmousemoveイベントをトリガーにして行っています。

mouseMove.addEventListener("mousemove", function(e) {
//処理
}

イベントが起こるごとに、divを作っています。

let div = document.createElement("div");

作ったdivに用意してあるクラスをつけます。

div.setAttribute("class", "dot");

.dotクラス↓

.dot {
position: absolute;
background-color: black;
width: 3px;
height: 3px;
}

positionがabsoluteなので、あとはtopとleftの値をpageXとpageXの値に設定して、appendchildを使い子要素に加えたら完成です。

div.style.top = y + "px";
div.style.left = x + "px";
mouseMove.appendChild(div);

感想

14日目には分からなかったことができて嬉しいです。
いまいち成長しているかどうか分からなかったんですが、過去にできなかったことができるようになっていたので少し自信がつきました。
とりあえずこの調子で年末まで頑張ります。

最後まで読んでいただきありがとうございます。明日も投稿しますのでよろしくお願いします。

参考

[アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト | 6000個以上のアイコン素材を無料でダウンロードできるサイト ICOOON MONO] (https://icooon-mono.com/)

アイコンをお借りしました。ありがとうございます！