jQueryを使い、マウスオーバーイベント時に画像をアニメーションで拡大し、マウスアウトイベント時に元の大きさに画像をアニメーションで縮小させる方法。配列やオブジェクトで対象画像や設定を指定できるようにした。
実装例
実装例(サンプル)の動作について
- 画像にマウスのカーソルを合わせると、画像をアニメーションで拡大する。
- 画像からマウスのカーソルを外すと、画像を元の大きさにアニメーションで縮小する。
ソースコード
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 ).animate(
{
height: $zoomSettings[this.id].zoomH + 'px',
width: $zoomSettings[this.id].zoomW + 'px',
},
{
duration: 'slow',
}
);
} );
jQuery( '#' + $zoomElements[$i] ).mouseout( function () {
jQuery( this ).animate(
{
height: $zoomSettings[this.id].zoomOutH + 'px',
width: $zoomSettings[this.id].zoomOutW + 'px',
},
{
duration: 'slow',
}
);
} );
}
} );
</script>
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 ).animate(
{
height: $zoomSettings[this.id].zoomH + 'px',
width: $zoomSettings[this.id].zoomW + 'px',
},
{
duration: 'slow',
}
);
} );
jQuery( '#' + $zoomElements[$i] ).mouseout( function () {
jQuery( this ).animate(
{
height: $zoomSettings[this.id].zoomOutH + 'px',
width: $zoomSettings[this.id].zoomOutW + 'px',
},
{
duration: 'slow',
}
);
} );
}
} );
</script>
HTML
<img id="sampleImg1" src="sampleImages1.png" />
<br />
<img id="sampleImg2" src="sampleImages2.jpg" />
<br />
<img id="sampleImg2" src="sampleImages2.jpg" />
CSS
<style>
#sampleImg1 {
height: 32px;
width: 32px;
}
#sampleImg2 {
height: 97px;
width: 185px;
}
</style>
#sampleImg1 {
height: 32px;
width: 32px;
}
#sampleImg2 {
height: 97px;
width: 185px;
}
</style>