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

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

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

実装例

実装例(サンプル)の動作について

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

ソースコード

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, アニメーション, サイズ, 画像, 逆引き パーマリンク