指定のタグをループ（setTimeout）で動かし続ける仕組み

ページ内の任意のタグをsplitで指定し、setTimeoutでループで数px指定したタグをランダムに動かしてみました。

1．JavaScriptの記述例

<script language="javascript" type="text/javascript">
<!--
function tgmv(){
	T=new Array();
	//以下で指定したタグが対象になります
	N='a|img|li|ul|h1|h2|h3|h4|p'.split('|');
	for(i=0;i<N.length;i++){
		for(E=document.getElementsByTagName(N[i]),j=0;j<E.length;j++){
			T.push(E[j]);
		}
	}
	L=T.length;
	loop();
	void(0);
}
function loop(){
		for(i=0;i<L;i++){
			S=T[i].style;
			S.position='relative';
			S.left=Math.round(Math.random()*10-5)+'px';
			S.top=Math.round(Math.random()*10-5)+'px';
		}
		setTimeout('loop()',100);
}
-->
</script>

2．HTMLの記述例

「body」のonLoadとonResize時にJavaScript処理を行い、idWrapのpadding位置を変更してます。

<div id="idWrap">

<h1>指定のタグをループ（setTimeout）でちょっと動かし続けます。</h1>

        
下のロゴ画像をクリックしてみて下さい。

<div><a href="javascript:void(0);" onclick="tgmv()"><img src="logo.jpg" alt="DAD UNION"></a></div>


<h2>h2タグです。</h2>


<ul>

 	<li>リストタグです。</li>


 	<li>リストタグも動いてます。</li>

</ul>


<h3>h3タグです。</h3>


<h4>h4タグも動いてますか？</h4>

</div>

指定のタグをループ（setTimeout）でちょっと動かし続けるデモ

使い方によっては、ページ内での目を引くちょっとした仕掛けになりそうですよね。