透過を使ったスムーズなロールオーバー：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> ＯＯＯ
ＯＯＯの部分に直接記述するか、外部ファイルとして読み込ませれば準備完了！
使い方
あとは
<p class="over"><a href="#"><img src="images/btn2_off.jpg" width="200" height="60" /></a></p> <p class="over">テキスト</p>
のようにロールオーバーを適用させたい箇所に
上記プログラム内で指定したクラス名(ここでは.over)を指定してあげればＯＫ。
このスクリプトの良いところは
テキストにも適用可能という点です。
参考サイト
jQuery勉強メモ：画像や文字の透明度を利用したロールオーバーをプラグイン化してみた
JavaScriptのおすすめ参考書
ポチップ
ポチップ
