JavaScriptのイベントを理解する

マウスポインタの動きに応じて要素の位置を定める

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
マウスポインタの動きを捉えるイベントで、マウス座標に合わせて要素の位置を定めます。
講師:
06:49

字幕

このレッスンではマウスポインタの 位置に合わせて要素の位置を 変えてみたいと思います 今9 つのサムネイルが並んでいるんですが そこにマウスポインタを合わせると 高解像度の画像が表示されます そしてその画像はマウスポインタの 動きに合わせて位置が移動するんですね マウスポインタの位置を調べそれにあわせて この高解像度の画像は ダイナミックに設定しているんですが その位置を変えて見たいと思います まずマウスの動きに合わせて というイベントは mouse move という イベントになります EventListener を登録する相手 それから場所はここでいいので これを1 回コピーしてペーストしましょう イベントだけ変えます mouse out を mouse が動いたら move ということになります それから EventListener を 削除するのも同じことになりますので これも先に設定しておきましょう マウスが離れたら高解像度の画像を 消すわけなんですけども div 要素ごと消すんですけれども 同じくマウスが動いたらっていう処理も 必要なくなりますので これはコピーを持ってきて インテントを合わせて add を remove にしときます この remove EventListener 忘れがちですので やらなければいけないということが わかってたら早めに登録するのがコツです ではもう1 つ忘れてましたね EventListener の listener 関数の名前を 変えないといけませんので ここは move とします 同じく念のためコピーして move ですね こういう失敗もよくやりがちなので ご注意ください ではこの move という listener 関数を定義するのですが 実はこの画像を除くという処理と 最初の方の準備は一緒なんですね ですからこれコピーしちゃいます コピーした時は直すところを忘れずに 直さないといけないんですけれども ちょっとコピーの位置間違いましたね カッコ閉じ まずは名前が move にしないといけませんので ここを move にします そしてそのあとの 3 つの処理は 基本的には一緒です まずイベントを起こした マウスが動いたというイベントを起こした ターゲットを取ります そして実際にはその親の要素に対して 処理をするわけなんで親も取っておきます でこちらはクリアという listener 関数では 要素を除いたんで removeNode にしてますけれども ここでは動かすので 名前は別にどうでもいいんですけど ちょっと気になりますから moveNode ということにしておきましょう そしてその位置を変えるわけですね moveNode の位置を変えるには CSS の設定を javascrpit コードで 変えることができます その場合には プロパティは style になります style 要素に書きますよね そしてどこに設定するか 左上位置を設定したいので まずは left 左です これ CSS の設定だと 思っていただければ結構です さて そうしたらマウスポインタの 位置を確かめて座標を取ります マウスポインターの座標と言っても いろんな基準があります 画面上 スクリーン上の座標 を取りたい場合もあります けれども今回は CSS の設定と同じ考え方ですから CSS の left とか top とかっていうのは 自分が配置されている親要素 その親要素の中で位置を設定します スクリーン上の座標の場合には clientX というのが マウス座標なんですが その自分が配置されている要素の中の 座標ということになると オフセットと言います offsetX です そしてマウスポインタがちょっと ずらしたいと思いますので 15 ピクセルくらい増やします CSS の設定と一緒ですから ここは文字列で指定しますので そして単位も必要ですから px ピクセルですね ですからここは数値なんですけれども この数値 マウス座標に 15 ピクセル足したものを文字列にして そして CSS の left として設定すると いう意味になります トップも同じように設定するんですが 間違いがないかどうか この段階で確認しておきましょう 「ファイル」を保存して 「ブラウザでプレビュー」します マウスポインタを重ねます 水平方向にはちゃんと動きますね 垂直方向はまだコード書いてないので 水平方向のみちゃんと追随して 動くことが確かめられました では垂直方向についても同様に設定しましょう もうここはコピーを使ってしまいましょう x についての left の設定を y についての top の設定にすればいいですね コピーしてペーストです left を top に x を y に変更します そして「保存」をして 「ブラウザ」で「プレビュー」です マウスポインタを重ねると 高解像度の画像が出てきて マウスポインタの位置に合わせて 移動しますね そして重ならせるサムネイルが変われば 画像が切り替わります こうしてイベントから マウスポインタの座標を取り出して その座標に合わせて 要素の位置を変えるということができました このレッスンではマウスポインタの 動きに合わせて要素の位置を変えるという 方法についてご説明しました マウスポインタが動いたらというのは イベントは mouse move です そしてマウスポインタの 要素の中における位置というのは offset x offset y で 要素の CSS 設定と 同じ設定を使いたいという時には style プロパティが使える ということでした

JavaScriptのイベントを理解する

あらかじめ決められた出来事が起こったときに発生するメッセージをJavaScriptでは「イベント」と言います。このコースではJavaScriptの基礎を学んだ方を対象に、マウス操作やデータの読み込みなどよく使われるイベントについて解説します。また関数の定義や処理の仕方などを実際にスクリプトを書きながら説明します。

2時間45分 (23 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年11月23日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。