上記スクリプトの30行目、
document.getElementById('mybox1').style.width=(pageWidth-20)+"px";
document.getElementById('mybox1').style.height=(pageHeight-10)+"px";
と、ありますが、この場合どうなっているんでしょうか？
<div id="mybox1">の横と縦の大きさを取得してからどうなっているのかわかりません。
43行目の
function myboxCmove() {
myPosC=document.getElementById('mybox2').style.left;
myPosC=eval(myPosC.replace("px", ""));
myPosC=myPosC+(myTargetC-myPosC)/speed;
document.getElementById('mybox2').style.left=myPosC+"px";
document.getElementById('mybox5').style.left=myPosC+"px";
setTimeout("myboxCmove()",10);
}
68行目の
function setTarget1() {
myTargetC=pageWidth-100;
myTargetR=pageWidth-50;
myTargetB=pageHeight-50;
}
の流れをザッっと説明していただけませんでしょうか。
4割ぐらいわかるのですが、ポイントポイントがわからなくて理解できないでいます。
No.1
57
12
35pt
最初のは、それぞれのdivの幅と高さを設定してるだけです。
次の43行目からは、まず、myPosCに現在のmybox2の左端の座標を代入。
んで、myTargetC(これは、アニメーションぽくぎゅい～～んってなって、最終的に落ち着くところの左端の座標)と現在の座標との差分をspeedで割って、現在の座標に足す。
つまり、myPosCは目的地の方向にチョット(大きさはspeed次第)移動する。
で、mybox2とmybox5の左端の座標を、そのチョット移動した座標に設定。
最後にsetTimeoutで10ミリ秒後に自分自身を呼び出す(なので、目的地までアニメーションぽくぎゅい～～んってなる)。
簡単に言えば、ぎゅい～～んってアニメーションぽクなるように、divの座標をチョットずつ移動させてる関数ですね。
で、68行目から。これは、↑にあった目的地の座標を設定してるだけ。
全体の流れとしては、ページ読み込み時に、それぞれのdivをデフォルトの目的座標(25行目あたり)に移動する。
マウスが、divにかぶったら、目的座標を変更する(68行目から)ので、それに伴って、ぎゅい～～ん開始(43行目から)。
divがいっぱいあるのでやや複雑ですが、やってることはこんな感じかと。
No.2
5712
35pt
＞pxを付けたり外したりしているのはなぜなのでしょうか？
座標値を計算するときには、数値である必要があります。ですので取得した座標から、その単位のpxを外して数値にした後に計算する必要があります。
一方、javascriptでスタイルのwidthやheightなどを指定する時には単位が必要です。ですので、style.leftとかstyle.widthとかに指定するときは、計算結果の数値に"px"を付けます。
＞document.getElementById('mybox2').style.left=myPosC+"px";
＞は、mybox2の左座標にmyPosCの値を代入するということでいいのでしょうか？
まあ、大雑把に言えばそういうことです。代入すると、ブロック要素mybox2の左端の座標が(親ブロックから相対的に)myPosCピクセルになります。
＞ここでのPageWidth-100等は何を意味するんでしょうか？
ページ幅(単位はピクセル)-100 ピクセル、ということです。
御提示のページで、青いところにマウスを乗せると、ぎゅい～～～んっと、真ん中、右側の部分が右の方に寄って行きますよね。このとき、真ん中の部分(赤いところとその上)の左端の座標が、PageWidth-100になっていると思います。
1
1
1
1
1
23
23
pxを付けたり外したりしているのはなぜなのでしょうか？
function myboxCmove()
の、
document.getElementById('mybox2').style.left=myPosC+"px";
は、mybox2の左座標にmyPosCの値を代入するということでいいのでしょうか？
また、
function setTarget1() {
myTargetC=pageWidth-100;
myTargetR=pageWidth-50;
myTargetB=pageHeight-50;
}
ここでのPageWidth-100等は何を意味するんでしょうか？