ウィンドウを震わせる

ウィンドウを震わせるには次のようにします。

  • ※ IEは現在のウィンドウが震えますが、それ以外のブラウザは新規ウィンドウが開き、開いた新規ウィンドウが震えます。
  • ※ ポップアップブロックにより新規ウィンドウが開かない場合があります。

デモ

サンプルコード

JavaScript

var movie = 5,    // 震える大きさ
    time  = 2000; // 震える時間

var shakeBtn = document.getElementById('shake');

if (!shakeBtn) return;

var isIE = navigator.userAgent.match(/MSIE/i);

// ボタンクリック時イベント
shakeBtn.onclick = function() {
	this.disabled = true;

	var self      = this,
	    win       = isIE ? window : window.open('about:blank', null, 'width=200,height=200'),
	    startTime = Date.now(),
	    count     = 1;

	var sid = setInterval(function() {
		if (count === 1) {
			win.moveBy(0, movie);
		} else if (count === 2) {
			win.moveBy(movie, 0);
		} else if (count === 3) {
			win.moveBy(0, -movie);
		} else {
			win.moveBy(-movie, 0);
			count = 0;
		}

		count++;

		if (Date.now() - startTime >= time) {
			clearInterval(sid);
			self.disabled = false;

			win.close();
		}
	}, 10);
};

IEとそれ以外のウィンドウの指定について

IEとそれ以外でウィンドウの指定が違いますが、IEは現在のウィンドウに対して現在の位置から相対的に移動をするためのwindow.moveByメソッドが使用できますが、それ以外のブラウザは現在のウィンドウに対してwindow.moveByメソッドが使用できません。
ただし、IE以外のブラウザに対してはwindow.openメソッドなどで開かれたサブウィンドウに対してはwindow.moveByメソッドが使用できるため、その再現をするためにウィンドウの指定が違います。

JavaScript逆引きリファレンス一覧へ戻る