ロールオーバーするとサムネイル画像が拡大表示されるサンプルを作ってみる。
jQueryアニメーション(animateメソッド)の使い方
書式
|
1 |
$(要素).animate({CSSプロパティ},”速度”,”動き”,[コールバック関数]); |
HTML部分
|
1 2 3 4 5 |
<ul class="hide">
<li><img src="pic.jpg" /></li>
<li><img src="pic2.jpg" /></li>
<li><img src="pic3.jpg" /></li>
</ul> |
サムネイル画像のデフォルト値を設定する。
透明度30%、サイズはデフォルトの1/2のサイズで表示しておきます。
スクリプト部分
|
1 2 3 4 5 6 7 8 9 10 |
//画像のサイズを取得
var imgWidth = $(".hide img").width();
var imgHeight = $(".hide img").height();
//画像サイズの初期値を1/2にしてサムネイルに
$(".hide img").css({
width : imgWidth/2,
height : imgHeight/2,
opacity: 0.3
}); |
マウスイベントを追加します。
hoverイベントを用いて、画像にマウスを乗せた時には、画像をデフォルトのサイズ、透明度100%にします。
マウスを外した時には初期値に戻すようにします。
hover( )イベントは以下のようになるので、
|
1 2 3 4 5 |
$( セレクター ).hover(function(){
マウスオーバー時の処理
},function(){
マウスアウト時の処理
}) |
スクリプト部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(".hide li").hover(function(){
//マウスオーバー時の処理
$("img",this).stop().animate({
width: imgWidth,
height: imgHeight,
opacity: 1
},"normal","swing");
},
function(){
//マウスアウト時の処理
$("img",this).stop().animate({
width: imgWidth/2,
height: imgHeight/2,
opacity: 0.3
},"normal","swing");
}); |
サンプルはこちら
