指定のタグをループ(setTimeout)で動かし続ける仕組み
- 2019.07.23
- JavaScript
- 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)でちょっと動かし続けるデモ
使い方によっては、ページ内での目を引くちょっとした仕掛けになりそうですよね。
-
前の記事
ページ内にあるURL(http、httpsから始まる文字)をjQueryを使ってリンク化 2019.07.22
-
次の記事
マウスオーバー(mouseenter)とマウスアウト(mouseleave)を使ってimgタグのsrc要素を入れ替え表示 2019.07.24