透過を使ったスムーズなロールオーバー: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勉強メモ:画像や文字の透明度を利用したロールオーバーをプラグイン化してみた