【jQuery】画像ロールオーバー時にフェイド変化するサンプルコード[rolloverfade.js]

画像ロールオーバー時にフェイドしながら変化するサンプルコード[rolloverfade.js]を作ってみた。

⇒デモ

【手順1】

ロールオーバーON時とOFF時の画像を準備する。
ON時の画像にはファイル名に“_on”を付けて保存する。

rolloverfade

【手順2】

下記のコードをjsファイル(rolloverfade.js)として保存する。

$(function(){
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
	var selector = selector_1 + ' img.'+ selector_2; 
	
	for (i=1; i<=$(selector_1).length; i++){
		$(selector_1 + ':nth-child(' + i + ') img').removeClass(selector_2).addClass(selector_2 + i);
		// 関数実行
		rollOverFadeEffect(selector + i);
	}

	// ユーザ定義関数
	function rollOverFadeEffect(selector){
		var change_img = $(selector).not('src=*' + '_on' + '.');
		change_img.each(function(){
			this.mouse_over_img = new Image();
			this.mouse_over_img.src = $(this).attr('src').replace(new RegExp('(\.gif|\.jpg|\.png)$'), '_on' + '$1');
			$(this.mouse_over_img).css({position: 'absolute', opacity: 0});
			$(this).before(this.mouse_over_img);
		
			$(this.mouse_over_img).hover(function(){
				$(this).animate({opacity: 1});
			},
			function(){
				$(this).animate({opacity: 0});
			});		
		});
	}
});

【手順3】

htmlファイルにjqueryと先ほど保存したrolloverfade.jsを呼ぶ出す。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/rolloverfade.js"></script>

【手順4】

htmlファイルにロールオーバー時にフェイド変化させたい画像を記述し、
imgタグ内にクラス(ここではclass=”fade_img”)を記述する。

<div id="contents">
	<ul class="fadeBlock">
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
		<li><a href="#"><img class="fade_img" src="img/icon_ore.jpg" /></a></li>
	</ul>
</div>

【手順5】

最後にrolloverfade.js内の変数にセレクタを記述し代入する。
“selector_1″に”imgの親要素指定”、”selector_2″に”imgのclass指定”を設定する。

<script>
	var selector_1 = 'ul.fadeBlock li';		// imgの親要素指定
	var selector_2 = 'fade_img';			// imgのclass指定
</script> 

【完成】

rolloverfade02

⇒デモ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>