THE HAM MEDIA BLOG

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

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin自作
タグ:
opacity
jquery
透明度
ロールオーバー
javascript

画像や文字の透明度を利用したロールオーバー

昨日のプラグインの記述方法を利用して、
自分がよく使う機能をプラグイン化してみた。

今回のは、以前にも紹介した、透明度を利用したロールオーバー。
時々利用するのでプラグインの記述方法で書き直してみた。

透明度を利用するロールオーバー

作ったプラグインのデフォルトの状態は、
以前に紹介したロールオーバーの逆、
ロールオーバー時に透明になっていき、
マウスが離れたときは、もとに戻る仕様にしています。

■JavaScript

(function($) {
  $(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);

◆使い方

jQueryを読み込んだ後、上記のスクリプトを読み込む。
そして適応させたい部分のclassにoverを指定する。
それだけで適応される仕組みになっている。
o画像でもテキストでもどちらでも適応される。

スクリプトは自分でカスタマイズすることも可能。
:(コロン)の右側を変更することで適応される。
fnClass:'.over', 適応させる部分の指定。例:'.roll'
opacityDef:1.0, 最初の透明度。1.0は透明にならない。0が透明。
fadeTime:200, 変化完了までの時間。1秒は1000
opacityOn:0.6, ロールオーバー時の透明度
opacityOff:1.0 マウスアウト時の透明度

■プレビュー

それぞれマウスを乗せると変化する。

ダミーテキスト

ダミーテキスト

ダミーエリア

ロールオーバー画像がないけど
ロールオーバーさせたいときに便利なこの透明度が利用できる。
CSSでもできるけど、ゆっくり変化させたいときなど、
JavaScriptを使ったほうが動きがあって綺麗なので、
僕としてはこれをおすすめする。

今回はマウスオーバー時に透明度が出るようにしてみたけど、
カスタマイズの部分で逆にすることも可能なので、
自分の好きなところで、自分の好きな透明度を指定して使って欲しい。

ちなみに、バグとかみていないので、あれば教えてほしいです。

この記事へのコメント
こんにちは。

透過を利用したロールオーバーを探していたので、スクリプトにURLを記載して使わせていただきました。
ありがとうございます^^


※10行目の末尾、コメントの後ろに「,」が入っています。

※私はフェード時間をマウスインとアウトで別変数にして使用しました。

※後日別の人がprototype.jsを足してしまったのですが大丈夫でしたw
Posted by WebbingStudio at 2009年03月09日
>WebbingStudioさん
ご利用ありがとうございます!
たしかにフェード時間をインとアウトを別変数にすると、ケースによって変えられますね。今度再度新しくしてみようと思います。
Posted by ハム at 2009年03月27日
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。