マウスのボタンを押している間実行し続け、ボタンを放すと止まるアニメーション

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

マウスのボタンを押している間、カウントアップやカウントダウンをし続け、ボタンを放すと止まるアニメーションのJavaScriptサンプル。

サンプル（実装例）

1

＋－

実装例の動作について

「＋」というテキストを持つ背景色が赤色のspan要素をクリックしている間、背景色が黄色のdiv要素内の数字をカウントアップし続ける。
「－」というテキストを持つ背景色が青色のspan要素をクリックしている間、背景色が黄色のdiv要素内の数字をカウントダウンし続ける。

ソースコード

JavaScript

<script type="text/javascript">
window.onload = function () {
var $sampleOutput = document.getElementById( "sampleOutput" );
var $sampleAElement = document.getElementById( "sampleA" );
$sampleAElement.onmousedown = function ( $event ) {
if( $event.button == 0 ){
$intervalID = setInterval(
function(){
countUpDown( 1 );
},
20
);
}
}
$sampleAElement.onmouseup = function ( $event ) {
if( $event.button == 0 ){
clearInterval( $intervalID );
}
}
var $sampleBElement = document.getElementById( "sampleB" );
$sampleBElement.onmousedown = function ( $event ) {
if( $event.button == 0 ){
$intervalID = setInterval(
function(){
countUpDown( -1 );
},
20
);
}
}
$sampleBElement.onmouseup = function ( $event ) {
if( $event.button == 0 ){
clearInterval( $intervalID );
}
}
}
function countUpDown( $n ) {
var $sampleOutput = document.getElementById( "sampleOutput" );
$sampleOutput.innerHTML = parseInt( $sampleOutput.innerHTML ) + $n;
}
</script>

HTML

<div id="sampleOutput">1</div>
<div id="sampleController">
<span id="sampleA">＋</span>
<span id="sampleB">－</span>
</div>

CSS

<style>
#sampleA,
#sampleB {
padding: 5px 15px;
border-radius: 10px;
color: white;
cursor: pointer;
}
#sampleA {
background-color: red;
}
#sampleB {
background-color: blue;
}
#sampleController {
width: 360px;
margin: 10px 0;
text-align: center;
}
#sampleOutput {
width: 300px;
padding: 30px;
font-size: 30px;
background-color: yellow;
text-align: center;
border-radius: 10px;
}
</style>

解説

JavaScript

<script type="text/javascript">

// ページ読み込み時に実行
window.onload = function () {

// id属性値が「sampleOutput」である要素への参照を変数「$sampleOutput」に代入
var $sampleOutput = document.getElementById( "sampleOutput" );

// id属性値が「sampleA」である要素への参照を変数「$sampleAElement」に代入
var $sampleAElement = document.getElementById( "sampleA" );

// マウスダウンイベント（ボタンを押した時のイベント）にイベントハンドラをバインド
$sampleAElement.onmousedown = function ( $event ) {

// 押したボタンが左ボタンの場合の処理
if( $event.button == 0 ){

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

}

}

// マウスアップイベント（ボタンを放した時のイベント）にイベントハンドラをバインド
$sampleAElement.onmouseup = function ( $event ) {

// 押したボタンが左ボタンの場合の処理
if( $event.button == 0 ){

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

}

}

// id属性値が「sampleB」である要素への参照を変数「$sampleBElement」に代入
var $sampleBElement = document.getElementById( "sampleB" );

// マウスダウンイベント（ボタンを押した時のイベント）にイベントハンドラをバインド
$sampleBElement.onmousedown = function ( $event ) {

// 押したボタンが左ボタンの場合の処理
if( $event.button == 0 ){

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

}

}

// マウスアップイベント（ボタンを放した時のイベント）にイベントハンドラをバインド
$sampleBElement.onmouseup = function ( $event ) {

// 押したボタンが左ボタンの場合の処理
if( $event.button == 0 ){

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

}

}
}

// カウントアップやカウントダウンをするユーザー定義関数
function countUpDown( $n ) {
var $sampleOutput = document.getElementById( "sampleOutput" );
$sampleOutput.innerHTML = parseInt( $sampleOutput.innerHTML ) + $n;
}
</script>

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

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