3回ほどXML/XLST関連でご案内してきましたが、そんな堅苦しいのはﾔﾀﾞ！JavaScriptってむずいの？なんて思われてしまったかもしれませんね。
ということで、こんどはウェブサイトにもブログにも、動くものがほしいときのアクセントを作ってみるなんていかがでしょうか。
DIVタグで表示している画像を、ブラウザの高さに従ってスライドさせてみるサンプルをご紹介いたします。ただスライドしていくのには、現在のX軸Y軸のポジションをインクリメント/ディクリメント（＋－）すればいいのですが、せっかくJavaScriptでは、現在のWindow枠のサイズが取得できますのでその値を利用しながら動かしてみることにします。
↓のボタンをクリックすると、ブラウザの左上から左下まで画像が下向きに動いていきます。
うさのJavaSript講座では、サンプル集８-２４でDLすることができます。サンプル集８にはそのほか右へスライドしたり斜めへスライド、そしてウィンドウを1周グルリとするものもございます。お楽しみ下さいませ♪


ソースはこちら↓

<script language="javascript"> <!-- //------------------------------------------------------------ //javascript by ＠うさ http://www.usagi-js.com/ //------------------------------------------------------------ var nLayerHeight = 70; //レイヤーの高さのピクセル数をいれてください。 var nXPos; var nYPos; var nTimer; function Init() { nXPos = 0; nYPos = 0; SampleStartMove(); } function SampleStartMove() { nYPos++; //NNの場合 if (navigator.appName=="Netscape") { //画面の大きさを取得します nHeight = window.innerHeight - nLayerHeight; //次の座標が画面よりも大きければなにもしません if (nYPos > nHeight) { return; } //NN4 if(document.layers) { //レイヤーの幅と高さをマウス座標にセット document.layerSample.left = nXPos; document.layerSample.top = nYPos; } //NN6 else { document.getElementById("layerSample").style.left = nXPos; document.getElementById("layerSample").style.top = nYPos; } } //IEの場合 if (document.all) { //画面の大きさを取得します。 nHeight = document.body.clientHeight - nLayerHeight; //次の座標が画面よりも大きければなにもしません if (nYPos > nHeight) { return; } //レイヤーの幅と高さを座標にセット layerSample.style.left = nXPos; layerSample.style.top = nYPos; } nTimer=setTimeout("SampleStartMove()",10); //タイマー } //--> </script>

HTMLはこちら↓

<DIV id="layerSample" style="position : absolute;left : 3px;top : 8px;width : 117px;height : 70px;visibility : visible; z-index : 1;" align="center"> <IMG src="images/usa_java.gif" width="54" height="19" border="0"> レイヤー部分です</DIV>