jQueryを使い、マウスオーバーで画像を拡大

jQueryを使い、マウスオーバーイベント時に画像を拡大し、マウスアウトイベント時に元の大きさに画像を縮小させる方法。配列オブジェクトで対象画像や設定を指定できるようにした。

jQueryを使わずに作る方法については、「マウスオーバーで画像を拡大するJavaScript(複数画像対応版)」のページへ。

アニメーションで拡大縮小させる方法については、「jQueryを使い、マウスオーバーで画像を拡大アニメーション」のページへ。

実装例


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

  1. 画像にマウスのカーソルを合わせると、画像を拡大する。
  2. 画像からマウスのカーソルを外すと、画像を元の大きさに縮小する。

ソースコード

JavaScript

<script type="text/javascript">
var $zoomElements = [ 'sampleImg1', 'sampleImg2' ];
var $zoomSettings = {
    sampleImg1: {
        zoomH: 64,
        zoomW: 64,
        zoomOutH: 32,
        zoomOutW: 32
    },
    sampleImg2: {
        zoomH: 195,
        zoomW: 371,
        zoomOutH: 97,
        zoomOutW: 185
    }
};
jQuery( function() {
    for( var $i = 0; $i < $zoomElements.length; $i++ ){
        jQuery( '#' + $zoomElements[$i] ).mouseover( function () {
            jQuery( this ).css( 'height', $zoomSettings[this.id].zoomH + 'px' );
            jQuery( this ).css( 'width', $zoomSettings[this.id].zoomW + 'px' );
        } );
        jQuery( '#' + $zoomElements[$i] ).mouseout( function () {
            jQuery( this ).css( 'height', $zoomSettings[this.id].zoomOutH + 'px' );
            jQuery( this ).css( 'width', $zoomSettings[this.id].zoomOutW + 'px' );
        } );
    }
} );
</script>

HTML

<img id="sampleImg1" src="sampleImages1.png" />
<br />
<img id="sampleImg2" src="sampleImages2.jpg" />

CSS

<style>
#sampleImg1 {
    height: 32px;
    width: 32px;
}
#sampleImg2 {
    height: 97px;
    width: 185px;
}
</style>

スポンサード リンク

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