指定タグをsetTimeoutでループして動かし続けるJavaScript｜DAD UNION

JavaScriptを使ってページ内の指定タグをsetTimeoutでループして数pxランダムに動し続ける方法をご紹介します。

Contents

指定タグをsetTimeoutでループして動かし続けるCSSの記述
ページ内のsplitで指定したタグをsetTimeoutでループして、数pxランダムに動し続けるJavaScriptの記述
指定タグをsetTimeoutでループして動かし続けるHTMLの記述
指定のタグをループ（setTimeout）でちょっと動かし続けるデモページ

指定タグをsetTimeoutでループして動かし続けるCSSの記述

※以下は任意です。必要に応じて変更して下さい。

<style type="text/css">
<!--
body {
	margin: 0px;
	font-size:14px;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1em;
	text-align:center;
	padding:15px 0 0 0;
}
#idWrap{
	width:600px;
	margin:0 auto;
	text-align:center;
}
ul{
	width:200px;
	margin:0 auto;
}
li{
	line-height:1.4em;
	text-align:left;
}
p{
	font-weight:bold;
}
-->
</style>

ページ内のsplitで指定したタグをsetTimeoutでループして、数pxランダムに動し続けるJavaScriptの記述

※関数tgmv()を用意します。tgmv()処理内でsplitでタグを指定します。指定したタグを関数loop()処理内で数px動かしつつsetTimeout()でloop()処理を繰り返します。

<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>

指定タグをsetTimeoutでループして動かし続けるHTMLの記述

※onClick=”tgmv()”を用意し、画像をクリックするとtgmv()処理が実行されます。tgmv()処理よりsplitで指定して動かし続けるタグを用意します。必要に応じて変更して下さい。

<div id="idWrap">
        <h1>指定のタグをループ（setTimeout）でちょっと動かし続けます。</h1>
        <p>下のロゴ画像をクリックしてみて下さい。</p>
        <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>