sugulogの日記

JavaScript、イベントと座標!ページ上の文字をカーソルに合わせて自由に動かそう!!

スポンサードリンク

f:id:sugulog:20210504180537p:plain

こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScriptのイベントと座標ということで

  •  Eventオブジェクトと座標

について簡単に解説します!!

その為このブログを読むことで、Eventオブジェクトと座標についての理解が深まるのはもちろん、ページ上でカーソルに合わせて自由に文字を動かすことができます。

是非最後までご愛読ください。

 

今回は、

  • ページ上の文字をカーソルの合わせて自由に動かそう

の順で解説していきます。

では早速、みていきましょう!!

・ページ上の文字をカーソルに合わせて自由に動かそう

まずHTMLで動かしたい文字を設定しましょう。

f:id:sugulog:20210504171323p:plain

 次にJavaScriptの記述です。

f:id:sugulog:20210504171828p:plain

動かしたい要素を取得後、今回はdocumentに対しaddEventListenerを使用しています。

documentオブジェクトは、ブラウザーに読み込まれたWebページを表します。

そのため表示されるWebページ全体に対し、イベントを監視することができます。

そしてmousedownイベントの中でmousemoveイベントを監視することで、「クリックしたまま動かした時」という条件をイベント監視に定義することができます。

また上記の条件を満たした時に、mouseMove関数が実行されます。

mouseMove関数では動かしたい要素に対しstyleを使い、margin-leftにはEventオブジェクトのclientXを使いX座標、margin-topにはclientYを使いY座標を割り当てています。

その結果、常にカーソルの位置を座標で取得し、動かしたい要素のmarginプロパティに適用させています。

最後にmouseupした際には、removeEventListenerすることで座標の取得を終了させています。

では実際に動きを見ていきましょう。

f:id:sugulog:20210504175117g:plain

カーソルに合わせて文字も動いているのが確認できますね!

また文字が動いてない時は、クリックを離した状態でカーソルを動かしている時です!!

 

以上、今回のブログでした。

Eventオブジェクトと座標についての理解が深まり、ページ上でカーソルに合わせて自由に文字を動かすことができましたか??

画像など他にも何か動かしたい時にも応用できそうですね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!