レイヤー

IE用です。

ID

レイヤーは、spanかdivのをコントロールします。styleを使いますので、IDを設定しておきます。

position

position:absolute
とします。絶対位置で指定するということです。これがないと動きませんし、これがあれば、あとは、位置を指定するだけで動きます。
left:始めの横位置
top:始めの縦位置
で、始めに出現させる位置を決めます。

left top

leftは横位置、topは縦位置です。
id.style.left=xまたは、id.style.posLeft=x で、横位置を変えられます。
x=id.style.left または x=id.style.posLeft で、横位置がわかります。
が、leftは、一度数字を入力しないと""になるようですし、文字(pxがつく)。ので、計算させたいときは、posLeftを使います。
id.style.left++ はダメです。が、id.style.posLeft++ はOKです。

visibility

表示、非表示を切り替えます。
表示するときは、CSS: visibility:visible JavaScript: id.style.visibility="visible"
非表示は、CSS: visibility:hidden JavaScript: id.style.visibility="hidden"

<script type="text/javascript">
<!--
function rnd(){
sakura.style.left=Math.random()*800;
sakura.style.top=Math.random()*600;
status="x="+sakura.style.left+" y="+sakura.style.top
}
//-->
</script>
<span id="sakura" style="position:absolute"><img src="anime/cat_1.png" width="32" height="32" alt="Neko" name="cat">moving..</span>
<p><button onclick="rnd()">move</button></p>

IMGのみ動かす場合は、IMGにIDを設定すれば、動きます。

Next : 次のステップへ
Pre  : 前のステップへ
 Up  : JavaScriptに戻る
Home : ホームに戻る
Presented by Rei

テレワークならECナビ Yahoo 楽天 LINEがデータ消費ゼロで月額500円〜！
無料ホームページ 無料のクレジットカード 海外格安航空券　海外旅行保険が無料！ 海外ホテル