jQueryを使い、マウスオーバーで画像を入れ替え及び拡大

投稿日: 2013年9月17日作成者: alphasis

jQueryを使い、複数画像のマウスオーバーイベント時に画像を入れ替え、アニメーションで拡大する。マウスアウトイベント時には元の画像に戻し、元の大きさにアニメーションで縮小させる。

画像にリンクを貼れば、メニューなどに応用できるだろう。

実装例

実装例（サンプル）の動作について

画像にマウスのカーソルを合わせると、画像を入れ替え、アニメーションで拡大する。
画像からマウスのカーソルを外すと、元の画像に戻し、元の大きさにアニメーションで縮小する。

ソースコード

JavaScript

<script type="text/javascript">
var $sampleImgs = [ 'sampleImg1', 'sampleImgRed', 'sampleImgBlue' ];
var $mouseEventSettings = {
sampleImg1: {
onmouseover: "http://alphasis.info/wp-content/uploads/2012/09/gimp-tutorial-round-button-color-variations-ex-mouse-over.png",
onmouseout: "http://alphasis.info/wp-content/uploads/2012/09/gimp-tutorial-round-button-color-variations-ex-mouse.png",
zoomH: 96,
zoomW: 96,
zoomOutH: 48,
zoomOutW: 48,
mouseoverLock: false,
mouseoutLock: false,
},
sampleImgRed: {
onmouseover: "http://alphasis.info/wp-content/uploads/2012/09/gimp-tutorial-round-button-color-variations-ex-red-mouse-over.png",
onmouseout: "http://alphasis.info/wp-content/uploads/2012/09/gimp-tutorial-round-button-color-variations-ex-red-mouse.png",
zoomH: 96,
zoomW: 96,
zoomOutH: 48,
zoomOutW: 48,
mouseoverLock: false,
mouseoutLock: false,
},
sampleImgBlue: {
onmouseover: "http://alphasis.info/wp-content/uploads/2012/09/gimp-tutorial-round-button-color-variations-ex-blue-mouse-over.png",
onmouseout: "http://alphasis.info/wp-content/uploads/2012/09/gimp-tutorial-round-button-color-variations-ex-blue-mouse.png",
zoomH: 96,
zoomW: 96,
zoomOutH: 48,
zoomOutW: 48,
mouseoverLock: false,
mouseoutLock: false,
}
};
jQuery( function() {
for( var $i = 0; $i < $sampleImgs.length; $i++ ){
var $sampleImg = jQuery( '#' + $sampleImgs[$i] );
$sampleImg
.attr( 'src', $mouseEventSettings[$sampleImgs[$i]].onmouseout )
.css(
{
'height': $mouseEventSettings[$sampleImgs[$i]].zoomOutH + 'px',
'width': $mouseEventSettings[$sampleImgs[$i]].zoomOutW + 'px',
}
);
$sampleImg.mouseover( function () {
if( !( $mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoverLock || $mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoutLock ) ){
$mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoverLock = true;
jQuery( this )
.attr( 'src', $mouseEventSettings[jQuery( this ).attr( 'id' )].onmouseover )
.animate(
{
height: $mouseEventSettings[jQuery( this ).attr( 'id' )].zoomH + 'px',
width: $mouseEventSettings[jQuery( this ).attr( 'id' )].zoomW + 'px',
},
{
duration: 'slow',
}
)
.queue( function() {
$mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoverLock = false;
jQuery( this ).dequeue();
} );
}
} );
$sampleImg.mouseout( function () {
if( !$mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoutLock ){
$mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoutLock = true;
jQuery( this )
.attr( 'src', $mouseEventSettings[jQuery( this ).attr( 'id' )].onmouseout )
.animate(
{
height: $mouseEventSettings[jQuery( this ).attr( 'id' )].zoomOutH + 'px',
width: $mouseEventSettings[jQuery( this ).attr( 'id' )].zoomOutW + 'px',
},
{
duration: 'slow',
}
)
.queue( function() {
$mouseEventSettings[jQuery( this ).attr( 'id' )].mouseoutLock = false;
jQuery( this ).dequeue();
} );
}
} );
}
} );
</script>

使用している主なjQuery api

HTML

<div>
<img id="sampleImg1">
<img id="sampleImgRed">
<img id="sampleImgBlue">
</div>

カテゴリー: API, JavaScript, jQuery, アニメーション, サイズ, 画像, 逆引きパーマリンク