mouseoverでmenuのスタイルが変わる、ってのは良くあるものだと思うのだけれど、
それに枠つけてー、とかエフェクトがー、とか言い出すと色々面倒だったので、
プラグイン探す手間より作っちゃったほうが早いかなと思って作ってみた。
以下source
/** * ボタンをいろいろエフェクト変えて表示するよー v1.0 * * $("ul.menu li a").btnimagedc( * { * imgdir:"./", * base:"image", * ext:"jpg", * sep:"-", * lay3:false, [Boolean(option)] // Mask image(suffix:"c") -> Cover image(suffix:b) -> Surface image(suffix:"a") * }, * { * animate:{ * top:"n", [n* or t] * left:"n", [n* or t] * width:"n", [n* or t] * height:"n", [n* or t] * direct_h:"n", [n* or r] * direct_v:"n", [n* or r] * easing:"none", [String ( jquery.easing required )] * duration:"fast" [Integer(msec) or String(fast,normal,slow)] * } * } * ); * * Copyright 2013 POPLEAF Co.,Ltd. */ (function($){ $.fn.extend({ btnimagedc:function(req,opt){ var def_req={ imgdir:"./", // 画像ディレクトリ base:"image", // ベースファイル名 ext:"jpg", // 拡張子（別々な拡張子はアウト） mask:"mask.png", // マスク用画像（複数のマスクは使えない） sep:"-", // ファイル名とサフィックスのセパレータ lay3:false // マスクを付けるかどうか }; var def_ani = { top:"n", // 上端位置を変化させない（tで上からスライドしてくる） left:"n", // 左端位置を変化させない（tで左からスライドしてくる） width:"n", // 幅を変化させない（tで幅を0～100%に変化させる） height:"n", // 高さを変化させない（tで高さを0～100%に変化させる） direct_h:"n", // 水平方向の変位を左から右へ（rで逆） direct_v:"n", // 垂直方向の変位を上から下へ（rで逆） easing:"none", // イージング（jquery.easingを使用） duration:"fast" // 変化する速度（msec指定かfast,slow,normalから選択） }; var require=$.extend(def_req,req); var options=$.extend(def_ani,opt); return this.each(function(n){ var r=require; var o=options; var $root = $(this); var s={top:0,left:0,width:0,height:0,opacity:1}; var e={top:0,left:0,width:0,height:0,opacity:1}; var imgsize; $root.css("position","relative").css("display","block").css("overflow","hidden"); $root.append('<img src="'+r.imgdir+r.base+r.sep+n+r.sep+"a"+"."+r.ext+'" />'); $root.append('<img src="'+r.imgdir+r.base+r.sep+n+r.sep+"b"+"."+r.ext+'" />'); if(r.lay3){ $root.append('<img src="'+r.imgdir+r.mask+'" />'); } $("img",$root).css("position","absolute").css("top",0).css("left",0).css("display","block"); // ここからは画像の読み込み完了後の処理 $($("img",$root).get(1)).load(function(){ imgsize = {width:$(this).width(),height:$(this).height()}; $root.width(imgsize.width); $root.height(imgsize.height); //ここからホバーアクションの処理 if(o.direct_h=="n"){ if(o.left=="t"){ s.left=-$root.width(); } }else{ if(o.left=="t"){ s.left=$root.width(); } } if(o.width=="t"){ e.width=$root.width(); }else{ s.width = e.width = $root.width(); } if(o.direct_v=="n"){ if(o.top=="t"){ s.top=-$root.height(); } }else{ if(o.top=="t"){ s.top=$root.height(); } } if(o.height=="t"){ e.height=$root.height(); }else{ s.height=e.height=$root.height(); } s.opacity=0; $(this).css("top",s.top+"px").css("left",s.left+"px").css("width",s.width+"px").css("height",s.height+"px").css("opacity",s.opacity); var $chld = $(this); $root.hover(function(){ $chld.animate({top:e.top,left:e.left,width:e.width,height:e.height,opacity:e.opacity},{easing:e.easing,duration:e.duration,queue:false}); },function(){ $chld.animate({top:s.top,left:s.left,width:s.width,height:s.height,opacity:s.opacity},{easing:s.easing,duration:s.duration,queue:false}); }); }); }); } }); })(jQuery);使い方は
$(".menu li").btnimagedc();でok。
この場合、表示されているドキュメントと同階層においてある画像を参照するのだけれど、
$(".menu li")で取得される要素の添え字をそのまま利用して画像を取得するようになっている
ex) １個目のliは添え字0なので、そのli要素の中に[./image-0-a.jpg]と[./image-0-b.jpg]が埋め込まれる埋め込む画像のセットが別にある場合は、パラメータにディレクトリのパスを埋め込む
$(".menu li").btnimagedc({imgdir:"http://hogefoovar.jp/img/set"});
とかやると、そのディレクトリからすべての画像リソースを取得するようになる。syntax highliterとかそのへん全然整えてないのでヒジョーに見づらいけど
近いうちにもっと詳しい使い方とか説明を入れるっす。
