KH-WEBLOG TOP > WEBメモ > JavaScript > 透過を使ったスムーズなロールオーバー:jQuery

透過を使ったスムーズなロールオーバー:jQuery

jQueryでする透過を使ったスムーズなロールオーバーが
なかなか便利そうなのでメモ
サンプル

ダウンロード

まずはいつものように、
jquery.js
http://jquery.com/
をダウンロードし、head内に読み込みます。

<script src="js/jquery.js"></script>

あとは

(function($) {
	$.fn.jsRollver = $(function() {
		$.hamFunction.opacityRollOver({
			fnClass:'.over',	/*適応させる部分の変更(,区切りで複数指定可)*/
			opacityDef:1.0,		/*デフォルトの透明度指定*/
			fadeTime:200,		/*フェードの時間指定*/
			opacityOn:0.6,		/*マウスオーバー時の透明度の指定*/
			opacityOff:1.0		/*マウスアウト時の最初の透明度の指定*/
		});
	});
	
	$.hamFunction = {
		opacityRollOver: function(options){
			var c = $.extend(options);
			$(c.fnClass).each(function(){
				$(this).css('opacity',c.opacityDef).hover(
					function(){
        				$(this).fadeTo(c.fadeTime,c.opacityOn);
        			},
    				function(){
        				$(this).fadeTo(c.fadeTime,c.opacityOff);
   					}
   				)
			});
		}
	};
})(jQuery);

上記ソースを

<script src="js/jquery.js"></script>
OOO

OOOの部分に直接記述するか、外部ファイルとして読み込ませれば準備完了!

使い方

あとは

<p class="over"><a href="#"><img src="images/btn2_off.jpg" width="200" height="60" /></a></p>
<p class="over">テキスト</p>

のようにロールオーバーを適用させたい箇所に
上記プログラム内で指定したクラス名(ここでは.over)を指定してあげればOK。

このスクリプトの良いところは
テキストにも適用可能という点です。

参考サイト

jQuery勉強メモ:画像や文字の透明度を利用したロールオーバーをプラグイン化してみた

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP SEO WordPress アイキャッチ画像 アクセス解析 カテゴリー カラーミーショップ カート コメント ショートコード ソースコード タグ テンプレートタグ ドロップダウンメニュー パーマリンク ビジュアルエディタ フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事