jQueryでシンプルにマウスオーバー時に画像をスライドさせる
マウスオーバーでちょっとエフェクトをかけたい。
でも、jQueryプラグインを使うほどの機能はいらないということがあるかと思います。
今回はプラグインを使用せず、シンプルにマウスオーバー時に画像をスライドさせたいと思います。
via：Useful image hover slide effect with jQuery | image hover,image slide
使用方法
jQueryからjquery.jsをダウンロードします。
またマウスオーバーで変化を与えたい画像を下記のように記述します。
<div id="id名">
<a href="#"><img src="画像パス" /></a>
</div>
なお、画像はエフェクト分を含めた形で作成します。
このため、最初はオーバー画像を隠すようにCSSを書きます。
#id名 {
width:296px;
height:130px; //半分の高さ
position:relative;
overflow:hidden; //はみ出た分隠す
}
これに対しJavaScriptは下記のようにします。
<script type="text/javascript" src="jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#id名 a").hover(function(){ //id名のaタグにマウスを乗せた時
$("img", this).stop().animate({top:"-130px"},{duration:200}); //top位置-130pxに200msかけて移動
}, function() { //マウスが外れた時
$("img", this).stop().animate({top:"0px"},{duration:200});//top位置0pxに200msかけて戻す
});
});
</script>
最後にCSSで画像にposition:absoluteを付与すれば完成です。
img {position:absolute;}
jQueryでシンプルにマウスオーバー時に画像をスライドさせるサンプル
コメントする
記事作成：2011年6月28日 10:06
