画像が跳ねて、画面の端で跳ね返って往復するダイナミックHTML。
Obj0＞Obj1＞Obj2＞Obj3＞Obj0＞…と画像を4つつなげてアニメ表示する仕組みのようです。
この順番でコマ分けして画像を指定すれば、画像をアニメ表示できます。
Obj0が高い位置、Obj1は真ん中の高さ、Obj2は下につく位置、Obj3は真ん中の高さ、Obj0の高い位置、と
くり返しているぽいです。
そして、これは飛び跳ねる画像の位置を「absolute」で指定するようになっています。
「absolute」は画面左上端から数える位置で、周りの字や画像がどうかなっても絶対に位置が変わらない「絶対位置」
という指定です。
位置を変えられるようにといろいろやってみましたが、今の私の知識では無理でした(ノ_<。)
すべてを無視して、同じ位置で往復してますｗ
1) </title>〜</head>に以下のタグを入れます。
<script language=javascript>
<!--
var sig = 1, g = 0, t = 50, n = 0, i
function timer(){
var objo,obj,objw,Wid
if(document.layers){
Wid = window.innerWidth
objo = eval("document.Obj" + n)
objo.visibility = "hidden"
n = n + sig
if(n > 3) n = 0
if(n < 0) n = 3
obj = eval("document.Obj" + n)
obj.visibility = "visible"
if(obj.left > Wid - 15)sig = -1
if(obj.left < 0)sig = 1
obj.left = obj.left + 5 * sig
g = g + 1
if(g >= 15) g = -g + 1
obj.top = obj.top + g
for(i=0;i<4;i++){
objw = eval("document.Obj" + i)
objw.left = obj.left
objw.top = obj.top
}
}
else {
Wid = document.body.clientWidth
objo = eval("Obj" + n + ".style")
objo.visibility = "hidden"
n = n + sig
if(n > 3) n = 0
if(n < 0) n = 3
obj = eval("Obj" + n + ".style")
obj.visibility = "visible"
if(obj.posLeft > Wid - 15)sig = -1
if(obj.posLeft < 0)sig = 1
obj.posLeft = obj.posLeft + 5 * sig
g = g + 1
if(g >= 15) g = -g + 1
obj.posTop = obj.posTop + g
for(i=0;i<4;i++){
objw = eval("Obj" + i + ".style")
objw.posLeft = obj.posLeft
objw.posTop = obj.posTop
}
}
setTimeout("timer()", t)
}
// -->
</script>
|
2) <body>〜</body>のどこかに以下のタグを入れます。
<div id=Obj0 style="position: absolute; top: 330">
<img src=【画像】></div>
<div id=Obj1 style="position: absolute; top: 260; visibility: hidden">
<img src=【画像】></div>
<div id=Obj2 style="position: absolute; top: 260; visibility: hidden">
<img src=【画像】></div>
<div id=Obj3 style="position: absolute; top: 260; visibility: hidden">
<img src=【画像】></div>
<div style="position: absolute; top: 230"></div>
|
3) <body>の < > 内に以下のタグを追加します。
「50」の数字は何を表すのか…どう変えても変化ないように思えますｗ
|
onLoad="setTimeout('timer()', 50)"
|
参考URL…http://www1.linkclub.or.jp/~yukos/
「HTMLタグ」のトップに戻る
|
|
|
