jQueryでマウスオーバーでアニメーション画像を使う

マウスオーバー

マウスオーバー

「マウスがボタンの上に来たら星のアニメがでるようにしたい」と

以前、言われたことがあります。

色々、探したのですが

マウスオーバーで画像が変わるというものは

多くあるのですが、

マウスオーバーで画像を追加するというものは

なかったみたいので作ってみました。

スポンサードリンク

イメージはこんな感じ

アニメーションマウスオーバーデモ1

1.ボタンリストを作ります

<ul id="navi" class="clearfix">
	<li><a href="リンク先URL"><img src="images/btn1.png" alt="btn1"></a></li>
	<li><a href="リンク先URL"><img src="images/btn2.png" alt="btn2"></a></li>
	<li><a href="リンク先URL"><img src="images/btn3.png" alt="btn3"></a></li>
	<li><a href="リンク先URL"><img src="images/btn4.png" alt="btn4"></a></li>    
</ul>

今回はリストタグで作ってますが

その都度変えて問題ないです。

2.マウスオーバー用のJavascriptを作ります

jQueryのマウスオーバーの書き方は

$(セレクタ名).hover(
  function () {
    //マウスオーバーのとき
  },
  function () {
    //マウスが離れたとき
  }
);

通常はマウスオーバーのときに画像を切り替えるというものですが、

通常のマウスオーバー

通常のマウスオーバー

今回はマウスオーバーのときに

アニメーション画像を上に重ねて表示する。

マウスが離れてたら、画像をなくす。

画像を重ねるマウスオーバー

画像を重ねるマウスオーバー

という感じでJavascriptを記述しました。

↓上のHTMLに合わせるとこんな感じです。

$(function() {
		$('#navi li a').hover(
			function(){
				$(this).css('position', 'relative');
				$(this).prepend('<img src="images/hover.gif" class="front">');
			},
			function(){
				$('.front').remove();
				$(this).css('position', '');
			}
		); 
	}
);

マウスオーバーになった時に、CSSのposition:relativeをつけます。

これは、上に重ねる画像の位置の基準をマウスオーバーした時の画像にするためです。

次に、上に重ねるimgタグを追加します。

マウスが離れたときは、

追加したCSSとimgタグを削除します。

3.リスト用のCSSを作ります

.front {
	position: absolute;
	top: -75px;
	left: 60px;
}

CSSでposition: absoluteにしたものは

浮いた状態になっていると思って下さい。

浮くことによって画像を重ねることができます。

そして親がposition:relativeになっていれば

親を基準として位置を指定できます。

今回親がインライン要素のアンカータグなので

高さをを持っていない状態です。

なので、下の画像の左下が基準になります。

追加した画像タグにfrontクラスをしているので

CSSで位置調整します。

位置決め

位置決め

TOPの指定がマイナスになるので

位置が決めにくいという場合は

アンカータグをブロックレベル要素にしてあげると

位置を決めやすくなります。

アニメーションマウスオーバーデモ2

結果はほとんど変わりません。

今回のデモだと

li a {
	width: 220px;
	height: 92px;
	display: block;
}

4行目のところでブロックレベル要素にすることで

高さの指定が有効になります。

あとは上に重ねる画像のCSSを以下のように指定します。

.front {
	position: absolute;
	top: 5px;
	left: 60px;
}

位置の指定はこんな感じです。

位置決め2

位置決め2

今回はアニメーション画像でやりましたが、

他にも使えそうな気がします。

何か面白そうなことできたら

記事に追加しますね。

今回、アニメーションGIFを作るのに便利なサイトがあります。

・chimply

Screenshot of www.chimply.com

簡単にローディング画像をつくれるので

結構、重宝しています。

スラスラ読める JavaScript ふりがなプログラミング (ふりがなプログラミングシリーズ)

新品価格
¥1,998から
(2019/9/21 06:18時点)

スポンサードリンク

コメントを残す

サブコンテンツ

このページの先頭へ