縦線も＜HR＞タグで作る予定だったが、何故か＜HR＞タグは”height:100”以上は認識しないようだ。しかたないので＜DIV＞タグにした。
Sample Source......................................................................>>>
<script language="JavaScript"><!--
var dx = 3; //横への移動量
var dy = 3; //縦への移動量
var dy2 = 2; //縦への移動量
var timerV,timerH,timerH2;
function MoveV(){
dv1.style.pixelLeft += dx;
//ｳｨﾝﾄﾞｳの両端に達したら移動量の符号を反転する
if(dv1.style.pixelLeft > document.body.clientWidth
- dv1.style.pixelWidth
- 5 ||
dv1.style.pixelLeft < 0)dx = -dx;
timerV = setTimeout("MoveV()",50);
}
function MoveH(){
hr1.style.pixelTop += dy;
if(hr1.style.pixelTop > document.body.clientHeight
- hr1.style.pixelHeight
- 3 ||
hr1.style.pixelTop < 0)dy = -dy;
timerH = setTimeout("MoveH()",50);
}
function MoveH2(){
hr2.style.pixelWidth = dv1.style.pixelLeft - 10;
hr2.style.pixelTop += dy2;
if(hr2.style.pixelTop > document.body.clientHeight
- hr2.style.pixelHeight - 3 ||
hr2.style.pixelTop < 0)dy2 = -dy2;
timerH2 = setTimeout("MoveH2()",50);
}
//--></script>
</head>
<body onload="MoveV();MoveH();MoveH2();">
<div id="dv1" style="position:absolute;top:0;
width:50;height:100%;background-color:green;
filter:alpha(opacity=30);"></div>
<hr id="dv2" style="position:absolute;top:0;
width:100%;height:50;background-color:pink;
filter:alpha(opacity=40);">
<hr id="hr2" style="position:absolute;top:0;
height:50;background-color:gray;
filter:alpha(opacity=40);">
end(最終更新:12/11/12)