WEBOPIXEL

jQueryでマウスオーバーすると全体的にピカーンってなるやつ

Posted: 2011.10.11 / Category: javascript / Tag: 

マウスオーバーは普通同じ大きさの画像を切り替えたりしますが、他の要素の背景画像を変えることで派手なマウスオーバーにすることができます。

Sponsored Link

demo

準備

htmlは特に変わったことはしません、適当な要素にクラスを割り当てます。

html

	<p class="button"><a href="#">ボタン</a></p>
	

その他マウスオーバーしたときの大きめの画像を用意します。
ここでは「bg.jpg」という名前で1000×1000の画像を使用します。

bodyのbackgroundを指定する方法

一番単純な方法はボタンをマウスオーバーしたときbodyのbackgroundを変更する方法です。
jQueryでimageとpositionの設定をしますので、cssでその他の設定をしておきます。

css

	body {
		background: #5794f2 no-repeat;
	}
	

jQueryのコードは次のようになります。

javascript

	$(function() {
		var imgWidth = 1000;
		var imgHeight = 1000;
		$('.button a').hover(function(e){
			var x = $(this).offset().left - (imgWidth/2) + ($(this).width()/2);
			var y = $(this).offset().top - (imgHeight/2) + ($(this).height()/2);
			var bgPos = $('body').css('backgroundPosition');
			//IEとそれ以外で条件分岐
			if (bgPos) {
				$('body').css({
					'background-image':'url(img/bg.jpg)',
					'background-position': x+ 'px ' + y + 'px'
				});
			} else {
				$('body').css({
					'background-image':'url(img/bg.jpg)',
					'background-position-x': x + 'px',
					'background-position-y': y + 'px'
				});
			}
		}, function() {
			$('body').css({
				'background-image':'none'
			});
		});
	});
	
1~2行目
画像サイズを指定します。
1000×1000の画像を使用しますので、それぞれ1000と指定しています。
5~6行目
配置する場所です。
要素は左上が原点となりますので、画像の半分とボタンの半分を引くことで中心に配置できます。
7~19行目
bodyの背景画像を配置しています。
IEでは「background-position-x」と「background-position-y」に別けて指定しなくてはいけないので、それぞれのブラウザ用に分岐しています。

フェードイン&フェードアウトして表示

バックグラウンドに透明度は設定できないので、フェードイン&フェードアウトしたいときは新たに画像用の要素を追加します。
cssで新たに下記を追加します。

css

	html, body {
		height: 100%;
	}
	#background {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		background: #efb357 url(img/bg2.jpg) no-repeat;
		width: 100%;
		height: 100%;
	}
	

jQueryのコードはこうなります。

javascript

	$(function() {
		$('body').append('<div id="background"></div>');
		var bg = $('#background');
		//全体の高さがbodyより大きかったらbgを全体の高さにする
		if ($('#wrap').outerHeight(true) > $('body').outerHeight(true)) {
			bg.height($('#wrap').outerHeight(true));
		}
		bg.css({'opacity': 0});
		var imgWidth = 1000;
		var imgHeight = 1000;
		$('.button a').hover(function(e){
			var x = $(this).offset().left  - (imgWidth/2) +  ($(this).width()/2);
			var y = $(this).offset().top - (imgHeight/2) +  ($(this).height()/2);
			var bgPos = bg.css('backgroundPosition');
			//IEとそれ以外で条件分岐
			if (bgPos) {
				bg.css({
					'background-position': x+ 'px ' + y + 'px'
				});
			} else {
				bg.css({
					'background-position-x': x+ 'px',
					'background-position-y': y + 'px'
				});
			}
			bg.stop().animate({opacity: 1},500);
			
		}, function() {
			bg.stop().animate({opacity: 0},500);
		});
	});
	

要素を追加したのでそのままleftとかtopに指定した方が楽ですが、画面端のボタンだとスクロールバーが表示されたりするので背景画像で設定した方が無難だとおもいます。

COMMENTS

Daisuke 2013-11-04 22:14 

こんにちわ。

マウスオーバー時に他の要素の背景画像を切り替えたくて、この記事にたどり着きました。
上記の方法は、ボタン1,2,3に一つのぴかーっとなっている画像に切り替えていますが、ボタン1,2,3それぞれに違う画像(例えば、ボタン1黄色いぴかー、ボタン2赤色ぴかー、ボタン3緑色ぴかー)を割り当てることはできますでしょうか?

LEAVE A REPLY

コードを書く場合は<pre>で囲んでください。