画像を、指定したサイズまで拡大縮小するアニメーション

投稿日: 2014年3月16日作成者: alphasis

ボタンクリックで、画像を、指定したサイズまで拡大縮小するアニメーションのJavaScriptサンプル。

サンプル（実装例）

実装例の動作について

「300pxに拡大」ボタンをクリックすると、徐々に大きくなるアニメーションで、画像の幅を300pxまで拡大する。
「150pxに縮小」ボタンをクリックすると、徐々に小さくなるアニメーションで、画像の幅を150pxまで縮小する。

ソースコード

JavaScript

<script type="text/javascript">
function expansionWidth( $target, $maxWidth ) {
disabledButtons( true );
var $intervalID = setInterval(
function(){
changeWidth()
},
1
);
function changeWidth() {
var $targetElement = document.getElementById( $target );
var $width = $targetElement.style.width;
$width = parseInt( $width.replace( 'px', '' ) );
if( $width < $maxWidth ){
$targetElement.style.width = ++$width + 'px';
}else{
clearInterval( $intervalID );
disabledButtons( false );
}
}
}
function reductionWidth( $target, $minWidth ) {
disabledButtons( true );
var $intervalID = setInterval(
function(){
changeWidth()
},
1
);
function changeWidth() {
var $targetElement = document.getElementById( $target );
var $width = $targetElement.style.width;
$width = parseInt( $width.replace( 'px', '' ) );
if( $width > $minWidth ){
$targetElement.style.width = --$width + 'px';
}else{
clearInterval( $intervalID );
disabledButtons( false );
}
}
}
function disabledButtons( $disabled ) {
$buttons = document.getElementById( "sampleButtons" ).getElementsByTagName( "button" );
for( var $i = 0; $i < $buttons.length; $i++ ) {
$buttons[$i].disabled = $disabled;
}
}
</script>

HTML

<p id="sampleButtons">
<button onclick="expansionWidth( 'sample', '300' )">幅を300pxに拡大</button>
<button onclick="reductionWidth( 'sample', '150' );">幅を150pxに縮小</button>
</p>
<img id="sample" style="width: 150px;" src="http://alphasis.info/library/javascript/jquery/plugin/cycle/sample/1.jpg" />

解説

JavaScript

<script type="text/javascript">

// 拡大用関数
function expansionWidth( $target, $maxWidth ) {

// ボタンを無効化
disabledButtons( true );

// 1ミリ秒ごとに「changeWidth()」関数を呼び出す繰り返しタイマー
var $intervalID = setInterval(
function(){
changeWidth()
},
1
);

// 1ミリ秒ごとに呼び出される関数
function changeWidth() {
var $targetElement = document.getElementById( $target );

// 現在の幅を取得し、変数「$width」に格納
var $width = $targetElement.style.width;

// 変数「$width」から「px」を取り除き、整数に変換
$width = parseInt( $width.replace( 'px', '' ) );

if( $width < $maxWidth ){
$targetElement.style.width = ++$width + 'px';
}else{

// 繰り返しタイマーを中止
clearInterval( $intervalID );

// ボタンを有効化
disabledButtons( false );
}
}
}

// 縮小用関数
function reductionWidth( $target, $minWidth ) {

// ボタンを無効化
disabledButtons( true );

// 1ミリ秒ごとに「changeWidth()」関数を呼び出す繰り返しタイマー
var $intervalID = setInterval(
function(){
changeWidth()
},
1
);

// 1ミリ秒ごとに呼び出される関数
function changeWidth() {
var $targetElement = document.getElementById( $target );

// 現在の幅を取得し、変数「$width」に格納
var $width = $targetElement.style.width;

// 変数「$width」から「px」を取り除き、整数に変換
$width = parseInt( $width.replace( 'px', '' ) );

if( $width > $minWidth ){
$targetElement.style.width = --$width + 'px';
}else{

// 繰り返しタイマーを中止
clearInterval( $intervalID );

// ボタンを有効化
disabledButtons( false );
}
}
}

// ボタンの有効無効を切り替える関数
function disabledButtons( $disabled ) {
$buttons = document.getElementById( "sampleButtons" ).getElementsByTagName( "button" );
for( var $i = 0; $i < $buttons.length; $i++ ) {
$buttons[$i].disabled = $disabled;
}
}

</script>

主に使用した構文、プロパティ、メソッド、イベント等。

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