QUESTION 1 と同様の条件で、IEの独自エレメントであるマーキーのように、文字列を左右にスクロールさせる。
01 <DIV id="marquee" style="position:absolute;width:250px;left:40px;height:1em;font:bold 20px sans-serif;text-al02 ign:center;">
03 <HR>
04 HTML TIPS&TRICKS
05 <HR>
06 </DIV>
レイヤーの外枠です。L03〜05 の中身には特に意味はありません。重要なのは L01 の属性値で、id 属性で ID をつけているのは QUESTION 1 と同じ理由です。style 属性も、height から後ろはなくても構いません。position は NN4 でレイヤーとして扱うため必須です。 width は移動範囲をはっきりさせるために、left は初期位置を決定するために必要です。
本来なら HTML ヘッダでスタイルの定義をするのですが、それでは DOM で値を取得できないため、 style 属性によって定義を行っています。
01 var moveTo = 10; //1回の移動距
02 var dx = moveTo; //移動量
03 var layerWidth = 250; //動かすレイヤーの幅
04 var moveMargin = 40; //移動マージン
05
06 //呼び出し用関数
07 function Call()
08 {
09 if((document.getElementById) || (document.all) || (document.layers))
10 { //DHTMLが可能なブラウザであった場合・・・
11 setInterval("Marquee()", 100); //0.1秒間隔で、関数 Marquee() を呼び出す
12 }
13 }
14
15 //レイヤーの位置をずらす関数
16 function Marquee()
17 {
18 var leftPointX, cWidth; //レイヤーの左端のX座標 ブラウザの表示領域の幅
19 if(document.getElementById) //DOM対応ブラウザの処理
20 {
21 layersStyle = document.getElementById("marquee").style;
22 //DOMオブジェクトを取得
23
24 if(document.all) //IE5〜6の処理
25 {
26 leftPointX = layersStyle.pixelLeft; //左端のX座標を取得
27 cWidth = document.body.clientWidth; //表示領域の幅を取得
28 }
29 else //Netscape6とMozillaの処理
30 {
31 leftPointX = parseInt(layersStyle.left);
32 //左端のX座標を取得
33 cWidth = innerWidth; //表示領域の幅を取得
34 }
35 }
36 else if(document.all) //IE4の処理
37 {
38 leftPointX = marquee.style.pixelLeft; //左端のX座標を取得
39 cWidth = document.body.clientWidth; //表示領域の幅を取得
40 }
41 else if(document.layers) //NN4の処理
42 {
43 leftPointX = document.marquee.left; //左端のX座標を取得
44 cWidth = innerWidth; //表示領域の幅を取得
45 }
46
47 //共通の処理
48 if((parseInt(leftPointX) + parseInt(layerWidth) + parseInt(moveMargin) >= parseInt(cWidth)))
50 { //移動範囲の右の端に接触したかはみ出した場合・・・
51 dx = parseInt(-moveTo); //移動量をマイナスに
52 }
53 else if(parseInt(leftPointX) < parseInt(moveMargin))
54 { //移動範囲の左の端に接触したかはみ出した場合・・・
55 dx = parseInt(moveTo); //移動量をプラスに
56 }
57 leftPointX += parseInt(dx); //移動先のX座標を設定
58
59 if(document.getElementById) //DOM対応ブラウザの処理
60 {
61 if(document.all) //IE5〜6の処理
62 {
63 layersStyle.pixelLeft = leftPointX; //設定値を反映
64 }
65 else //Netscape6とMozillaの処理
66 {
67 layersStyle.left = parseInt(leftPointX) + "px";
68 //設定値を反映
69 }
70 }
71 else if(document.all) //IE4の処理
72 {
73 marquee.style.pixelLeft = leftPointX; //設定値を反映
74 }
75 else if(document.layers) //NN4の処理
76 {
77 document.marquee.left = leftPointX; //設定値を反映
78 }
79 }
コメントだけではわかりにくい部分だけ説明します。
このコードは大きく3つの部分に分かれています。まずは初期値を設定する L01〜04。0.1秒間隔でレイヤーの位置をずらす関数 Call() のL06〜13 。そして、実際にずらす作業をする関数 Marquee() の L16〜79 です。
関数 Marquee() はさらに3つに分かれています。ブラウザごとの違いを吸収するように分岐して処理を行う L19〜45 と、 L59〜78 。共通の処理を行う L48〜57 です。処理の分岐は、特定のオブジェクトを扱えるかどうかで行っています。 この方法は比較的定番のものです。
この2つのブラウザに限っては、取得した値は単位付きの文字列になります。よって、取得したままでは扱えないため、 parseInt という関数によって整数に変換しています。また、反映するときにも単位をつけて文字列として代入を行う必要があります（L67）。