[jQuery] マウスカーソル追従

最近になって jQuery を勉強しだした。

ちょっと前までは割とFlashを作っていたので、「jQueryがなんじゃい。Flash使えばちょいちょいっと作れるじゃん♪」とか思っていたのですが、「スマホ(iPhone)対応」とか「Flash使わないでできない?」といった仕事の話もあり勉強し始めたところ以外とはまってしまった。
今回はマウス追従する画像のサンプルを作ったので投稿します。
『今更マウス追従かよ!』とお思いでしょうが、まあ基本というか、これからjQuery勉強しようと思っている方には良いかもしれないのでご参考になれば嬉しいです。

デモ・ダウンロード

デモ
ダウンロード

作り方

jQueryを読込む

まずはjQueryを読込みます。



ここは特に問題ないですね。では次。

Javascript

HTML

ポイント解説

CSSで position を絶対配置

ここで、マウスカーソルに追従させる要素の大きさなどを設定します。
別にCSSを外部ファイルや、HTMLファイル内で設定してもかまいません。
重要なのは、【position:’absolute’】
こうして絶対配置にしないと動きません。

アニメーションの停止

$('div.#icon').css({width:'100px', height:'100px', overflow:'hidden', position:'absolute', top:'0', left:'0'});

これが重要です。
アニメーションをストップさせます。そうしないと、【mousemove】で発生した【$(‘div.#icon’).animate({ ==省略== });】は順番に動作していくので、動きがおかしくなります。
【$(‘div.#icon’).stop();】する事により、直前に発生した【$(‘div.#icon’).animate({ ==省略== });】を停止し、次の【$(‘div.#icon’).animate({ ==省略== });】を動作させます。
以上です。
jQuery の基本的な事については、jQuery 基本で検索してみてください。僕もそうして勉強しました。
間違いや、修正、もっといい方法などあったらコメントくださいませ。
ではでは。

タイトルとURLをコピーしました