JavaScriptで画像を振動(ブルブル)させる

JavaScriptで画像を振動(ブルブル)させます。

よく、ホームページでブルブル振動してる画像がありますが、JavaScriptで簡単にできます。

下記のコードを HTML に書いて、あとは、コメントにあるように、振動させたい画像に、

を追記します。

簡単でしょ!

<script LANGUAGE="JavaScript">
<!--

	// ▼ ブルブル画像をふるわせる
	count = 0;
	var img;

	function vibration(im){
		img=im;
		IntervalID=setInterval('vib()',50)
	}

	function vib(){
		img.style.left = count;
		img.style.top = count;
		count = count?0:3;      //count?0:3 の 3 の数字を大きくすると、大きくブルブル、小さくすると小さくブルブル
	}
	
	/*
	 *  HTML の画像に下記のコードを追加
	 *  
	 *   style="position:relative;" onmouseover="vibration(this);" onmouseout="clearInterval(IntervalID)"
	 *  
	 *  例)
	 *  <img src="img/hogehoge.jpg" alt="ホゲホゲ" style="position:relative;" onmouseover="vibration(this);" onmouseout="clearInterval(IntervalID)">
	 *
	 */

	// ▲ ブルブル画像をふるわせる
//-->
</script>

 

このエントリーをはてなブックマークに追加