マウスカーソルの隣に吹き出しを表示する

こんにちは、ウェブラボ技術メモです。

今回はマウスカーソルの座標を使って、マウスカーソルの隣に吹き出しを表示してみます。

DEMOはこちら

マウスカーソルの座標を取得する方法については、こちらのページを参考にさせていただきました。

http://hakuhin.jp/js/mouse.html

それでは実装まで解説していきます。

まずはhead内でjquery本体と動作に必要なCSSを読み込ませ、

動作させるためのスクリプトを記述します。

■スクリプト

e.clientX、e.clientYでマウスカーソルの座標を取得しています。

さらに数字を加算・減算することで、自由に位置を調整できます。

次に色領域と吹き出しをHTMLに記述します。

■HTML

最後にHTMLに対応したCSSを記述します。

■CSS

色領域と吹き出しは、自由にスタイルを指定できます。

今回はpositionの「absolute」を使って、吹き出しがマウスカーソルと一緒に動く動作を実装しましたが、「width」「height」で要素の拡大・縮小を行うことも可能なので、マウスカーソルの座標を利用できる幅は広いかもしれません。

対応ブラウザについて確認してみました。

◯ Google Chrome

◯ Firefox
◯ Safari
◯ Opera
◯ Internet Explorer 9、10+
△ Internet Explorer 7、8(動作はするが、吹き出しの表示が不安定)

基本的にどのブラウザでも正常に動作するでしょう。

ただし、要素の角を丸くする「border-radius」は、IE8以下に対応していないのでご注意ください。

以上、技術メモでした。

  • このページを共有する

関連記事こちらの記事も合わせてどうぞ。