画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグイン
前に作った画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプトをプラグイン化してみました。特に追加したアニメーションもありませんがね。単純に1つにまとめてアニメーションの変更等をしやすくしたくらいです。
必要なファイル
対応ブラウザ
- Google Chrome
- Safari4~
- Firefox3~
- Internet Explorer6~
- Opera11
※Windowsのみの確認です。
コーディング&設定
HTML
HTMLヘッダー内でjquery.jsを読み込む。
<script src="jquery.js" type="text/javascript"></script>
ロールオーバーさせる要素の設定します。下記JavaScriptの設定だとimg
要素にclass="rollover"
です。
<img src="sample1.gif" class="rollover"> <img src="sample2.gif" class="rollover"> <img src="sample3.gif" class="rollover">
画像ファイル名
ロールオーバー用画像(形式はなんでもOK)を用意し、ロールオーバー前の画像ファイル名の最後にロールオーバー用の文字列(初期設定:_ov)を追加する。その画像をロールオーバー前の画像と同じフォルダに入れる。
(例)ロールオーバー前の画像がsample.gifならsample_ov.gifというファイル名にする。
JavaScript
以下のスクリプトを記述。
5行目でスクリプトを実行しています。オプションは下の方で説明します。もちろんclass
別にアニメーションを複数設定することも可能です。
(function($){ //プラグイン実行 $(function(){ $("img.rollover").imgOvAnime(); //実行する要素を記述。オプションあり。 }); //プラグイン $.fn.imgOvAnime = function(option){ var o = $.extend({ ovStr: "_ov", speed: 500, type: "fade" },option); var overElements = $(this); //フェード関数 function fade(){ var ovElm = overElements; var ovStr = o.ovStr; var speed = o.speed; ovElm.css({position:"relative"}).each(function(){ var self = $(this); var url = self.attr("src").replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2"); var ovImg = $("<img>").attr("src",url).css({position: "absolute"}); function anime(a_alp){ self.stop().animate({opacity:a_alp},speed); } self.before(ovImg).hover( function(){ anime("0"); }, function(){ anime("1"); }); }); } //スライドトップ関数 function slideTop(){ var ovElm = overElements; var ovStr = o.ovStr; var speed = o.speed; ovElm.css({position:"relative",opacity:"0"}).each(function(){ var self = $(this); var urlDef = self.attr("src"); var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2"); var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"}); $(window).bind("load",function(){ var w = self.width()+"px"; var h = self.height()+"px"; var ovImg = $("<span>").css({ width: w, height: "0", backgroundImage: "url("+urlChange+")", position: "absolute", fontSize: "0" }); function anime(a_h){ self.prev().stop().animate({height:a_h},speed); } self.before(imgBack).before(ovImg).hover( function(){ anime(h); }, function(){ anime("0"); }); }); }); } //スライドレフト関数 function slideLeft(){ var ovElm = overElements; var ovStr = o.ovStr; var speed = o.speed; ovElm.css({position:"relative",opacity:"0"}).each(function(){ var self = $(this); var urlDef = self.attr("src"); var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2"); var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"}); $(window).bind("load",function(){ var w = self.width()+"px"; var h = self.height()+"px"; var ovImg = $("<span>").css({ width: "0", height: h, backgroundImage: "url("+urlChange+")", position: "absolute" }); function anime(a_w){ self.prev().stop().animate({width:a_w},speed); } self.before(imgBack).before(ovImg).hover( function(){ anime(w); }, function(){ anime("0"); }); }); }); } //フェードスライドトップ関数 function fadeSlideTop(){ var ovElm = overElements; var ovStr = o.ovStr; var speed = o.speed; ovElm.css({position:"relative",opacity:"0"}).each(function(){ var self = $(this); var urlDef = self.attr("src"); var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2"); var imgBack = $("<img>").attr("src",urlDef).css({position:"absolute"}); $(window).bind("load",function(){ var w = self.width()+"px"; var h = self.height()+"px"; var ovImg = $("<span>").css({ width: w, height: "0", backgroundImage: "url("+urlChange+")", position: "absolute", opacity: "0", fontSize: "0" }); function anime(a_h,a_alp){ self.prev().stop().animate({height:a_h,opacity:a_alp},speed); } self.before(imgBack).before(ovImg).hover( function(){ anime(h,"1"); }, function(){ anime("0","0"); }); }); }); } //スライドトップ2関数 function slideTop2(){ var ovElm = overElements; var ovStr = o.ovStr; var speed = o.speed; ovElm.css({position:"relative",opacity:"0"}).each(function(){ var self = $(this); var urlDef = self.attr("src"); var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2"); $(window).bind("load",function(){ var w = self.width()+"px"; var h = self.height()+"px"; var imgBack = $("<span>").css({ width: w, height: h, backgroundImage: "url("+urlDef+")", position: "absolute", fontSize: "0" }); var ovImg = $("<span>").css({ width: w, height: "0", backgroundImage: "url("+urlChange+")", position: "absolute", fontSize: "0" }); function anime(a_h1,a_h2){ var selfOvImg = self.prev(); selfOvImg.animate({height: a_h1},speed); selfOvImg.prev().stop().animate({height: a_h2},speed); } self.before(imgBack).before(ovImg).hover( function(){ anime(h,"0"); }, function(){ anime("0",h); }); }); }); } //フェード拡大縮小関数 function fadeSizing(){ var ovElm = overElements; var ovStr = o.ovStr; var speed = o.speed; ovElm.css({position:"relative",opacity:"0"}).each(function(){ var self = $(this); var urlDef = self.attr("src"); var urlChange = urlDef.replace(/^(.+)(\.[a-z]+)$/,"$1"+ovStr+"$2"); $(window).bind("load",function(){ var w = self.width()+"px"; var h = self.height()+"px"; var imgBack = $("<span>").css({ width: w, height: h, backgroundImage: "url("+urlDef+")", position: "absolute", fontSize: "0" }); var ovImg = $("<span>").css({ width: "0", height: "0", backgroundImage: "url("+urlChange+")", position: "absolute", opacity: "0", fontSize: "0" }); function anime(a_w1,a_w2,a_h1,a_h2,a_alp1,a_alp2){ var selfOvImg = self.prev(); selfOvImg.stop().animate({width: a_w1,height: a_h1,opacity: a_alp1},speed); selfOvImg.prev().stop().animate({width: a_w2,height: a_h2,opacity: a_alp2},speed); } self.before(imgBack).before(ovImg).hover( function(){ anime(w,"0",h,"0","1","0"); }, function(){ anime("0",w,"0",h,"0","1"); }); }); }); } //アニメーションタイプ確認 switch(o.type){ case "fade": fade(); break; case "slideTop": slideTop(); break; case "slideLeft": slideLeft(); break; case "fadeSlideTop": fadeSlideTop(); break; case "slideTop2": slideTop2(); break; case "fadeSizing": fadeSizing(); break; } } })(jQuery);
オプション
- ovStr (ロールオーバー用画像の追加文字列)
- 適当な文字列 (初期設定:_ov)
- speed (アニメーション速度)
- 適当な速度の数値 1000=1秒 (初期設定:500)
- type (アニメーションタイプ)
- fade、slideTop、slideLeft、fadeSlideTop、slideTop2、fadeSizing (初期設定:fade)
オプション設定例
$("img.rollover").imgOvAnime({ ovStr: "_over", speed: 200, type: "slideTop" });
注意点
img
要素に以下のスタイルを適用すると高確率でホバー画像の位置がずれます。まあ、あまり指定することもないと思うので問題ないかと。
- type: "fade" の場合
float
、positon
- type: "fade" 以外の場合
float
、position
、border
、padding
、margin
あとがき
本当はコンストラクタ関数でクラス的なことをして綺麗にソースをまとめたかったんですが、上手くいかなくて、自分の力ではほぼ全ての処理をアニメーションタイプ別に記述するのが精一杯でした。ホント長ったらしいソースだことで。