質問: 上記スクリプトの30行目、 document.getElementById('mybox1').style.width=(pageWidth-20)+"px"; document.getElementById('mybox1').style.height=(pageHeight-10)+"px"; と、ありますが、この場合どうなっているんでしょうか? の横と縦の大きさを取得してからどうなっているのかわかりません。 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割ぐらいわかるのですが、ポイントポイントがわからなくて理解できないでいます。
回答: >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になっていると思います。