HOME 　>>> 　HTML整理ノート 　>>> DHTML --　 基本編　　応用編

バウンドするボールと文字列

　

バウンドする文字列

のうがき ・body.clientWidth／clientHeight･･･現在のドキュメントウィンドウからスクロールバー部分と枠線を 差し引いた領域の幅と高さ(ピクセル単位)
・body.scrollLeft／scrollTop･･･（スクロールによりはみだした）ドキュメントウィンドウの左端／上端とWWWプラウザの左端／上端との距離(ピクセル単位)。＊スクロール後の現在のドキュメントウィンドウの左上位置に該当する。
・offsetWidth／offsetHeight･･･オブジェクトの横幅／縦幅

Sample Source......................................................................>>>

<script Language="JavaScript"><!--
var x = 100;    //ﾎﾞｰﾙの現在X座標
var y = 100;    //ﾎﾞｰﾙの現在Y座標
var tx = 300;    //文字列の現在X座標
var ty = 200; //文字列の現在X座標
var ox = 6;        //ﾎﾞｰﾙの横方向の増分(減分)
var oy = 8;        //ﾎﾞｰﾙの縦方向の増分(減分)
var tox = 4;    //文字列の横方向の増分(減分)
var toy = 6;    //文字列の縦方向の増分(減分)

function Move(){
var obj = document.all.boll;    //ﾎﾞｰﾙｵﾌﾞｼﾞｪｸﾄ
var objt = document.all.txt;    //文字列のｵﾌﾞｼﾞｪｸﾄ
var bodyCW = document.body.clientWidth; //ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの横幅
var bodyCH = document.body.clientHeight; //ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの縦幅
var bodySCL = document.body.scrollLeft; //ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの左端X座標
var bodySCT = document.body.scrollTop; //ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの上端Y座標
//bodySCLとbodySCTは、ﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの上下左右ｽｸﾛｰﾙで変化する

//･････････････････････････････････(以下はﾎﾞｰﾙの位置移動)･･
x += ox;    //X座標方向を増やす(減らす)
y += oy;    //Y座標方向を増やす(減らす)
if((x+obj.offsetWidth >= bodyCW+bodySCL)||(x <= bodySCL)){
        //ﾎﾞｰﾙがﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの右端||左端に達したとき
    ox = -ox;        //符号を反転(増分と減分を切り替える）
    if(x <= bodySCL){
        x = bodySCL; //ﾎﾞｰﾙの位置をﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの左端に合わす
    }else{
        x = bodyCW - obj.offsetWidth + bodySCL;
            //ﾎﾞｰﾙの位置をﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの右端に合わす
    }
}
if((y+obj.offsetHeight >= bodyCH+bodySCT)||(y <= bodySCT)){
        //ﾎﾞｰﾙがﾄﾞｷｭﾒﾝﾄｳｨﾝﾄﾞｳの下端||上端に達したとき
    oy = -oy;
    if(y <= bodySCT){
        y = bodySCT;
    }else{
        y = bodyCH - obj.offsetHeight + bodySCT;
    }
}
obj.style.posLeft = x; //ﾎﾞｰﾙのleft位置を設定
obj.style.posTop = y;    //ﾎﾞｰﾙのtop位置を設定

//･･･････････････････････(以下は文字列の位置移動)･･
//･･･････････････････････(ｽｸﾘﾌﾟﾄ内容はﾎﾞｰﾙの場合と同じ)
tx += -tox;
ty += -toy;
if((tx+objt.offsetWidth >= bodyCW+bodySCL)||(tx <= bodySCL)){
    tox = -tox;       
    if(tx <= bodySCL){
        tx = bodySCL;
    }else{
        tx = bodyCW - objt.offsetWidth + bodySCL;
    }
}
if((ty+objt.offsetHeight >= bodyCH+bodySCT)||(ty <= bodySCT)){
    toy = -toy;
    if(ty <= bodySCT){
        ty = bodySCT;
    }else{
        ty = bodyCH - objt.offsetHeight + bodySCT;
    }
}
objt.style.posLeft = tx;
objt.style.posTop = ty;
}
// --></script>
</head>

<body onload="timerID=setInterval('Move()',20);"
    onunload="clearInterval(timerID);">

<img id="boll"
    style="position:absolute;top:100px;left:100px;z-index:-1"
    src="../../images/bt0707.gif" width="28" height="28">

<div id="txt"
    style="position:absolute;top:200px;left:300px;
        width:180;height:28;color:blue;font-size:16pt;
        background-color:pink;z-index:2">
    ﾊﾞｳﾝﾄﾞする文字列
</div>

end(最終更新:12/11/12)