Web制作の現場で使えるjQuery　UIデザイン入門 ― 第6回

jQueryのイベントをチュートリアルで学ぶ（前編） (6/6)

マウスの動きに合わせて命令を実行する mousemove()

　mousemove() は、特定の要素上でマウスカーソルが動いた場合に命令を実行できます。

$(セレクター).mousemove(function(){
        //セレクターで指定した要素上でマウスカーソルが動いている際に実行したい命令
})

　実際に mousemove() を利用するのは、座標などの情報を取得する命令と組み合わせるケースがほとんどです。ここでは詳しく説明しませんが、mousemove() 内の function() を function(e) としておくと、イベント発生時にe.clientXで現在のマウスのX座標、e.clientYでマウスのY座標を取得できます。以下は、img要素上でマウスカーソルが動いている際に、カーソルのX座標とY座標をp要素に書き出すサンプルプログラムです。

▼サンプル13（スクリプト部分）

$(function(){
    $("img").mousemove(function(e){
        $("p").html("現在のX座標："+e.clientX+"<br />現在のX座標："+e.clientY);
    })
})

▼サンプル13（(X)HTML部分）

<img src="flower.jpg" alt="花" />
<p></p>

▼サンプル13（実行結果）

サンプル13の実行画面。img要素上でマウスカーソルを動かすと、現在の座標がp要素に書き出される

　X座標とY座標は、ブラウザーの左上からマウスカーソルまでの距離をピクセル単位で取得できます。

【JavaScriptワンポイントメモ】

JavaScriptによるテキストの結合

　mouseover() のサンプルでは、以下のようなコードが登場しました。

html("現在のX座標："+e.clientX+"<br />現在のX座標："+e.clientY)

　これまで解説してきたように、jQueryではさまざまな値を取得できますが、上のコードのように取得した値と、任意のテキストや(X)HTMLを組み合わせる場合は、テキストを結合する必要があります。

　JavaScriptでテキストを結合するには、テキストや(X)HTMLを"(ダブルクオーテーション)の内側に記述し、+(プラス)で並べていきます。たとえば先ほどのコードで、e.clientXが「380」、e.clientYが「48」という値になる場合、設定される(X)HTMLは「現在のX座標：380<br />現在のX座標：48」になります。

---

(後編に続く）

著者：西畑一馬（にしはた かずま）

to-R代表、Webクリエイター。PHPによるシステム開発や、CMSを利用したWebサイト制作、SEO対策などのマーケティング、コンサルティング、Webクリエイター向けの講座などを業務で行なっている。また、ブログto-RではJavaScriptやSEO対策、CSS、Movable TypeなどのWeb制作にかかわるさまざまな情報を発信している。
主な著書に「現場のプロから学ぶXHTML+CSS」（共著、毎日コミュニケーションズ刊）がある。