1. DreamWeaver にレイヤーを挿入し、このレイヤーをスクロール領域として使用します。レイヤーのパラメータを次のように設定します。
レイヤー番号を「slayer」に設定します。これはレイヤーの ID 属性です。
左と上の値はページ上のレイヤーの位置で、必要に応じて設定できます。ここでは 100 ピクセルと 120 ピクセルです。
幅と高さはレイヤーのサイズであり、必要に応じて設定されます。
クリップとはレイヤーの表示領域を指し、クリップの外側の部分は非表示になります。この表示領域を使用してレイヤーの右側の部分を非表示にし、この表示領域を制御しながらレイヤーの移動を制御してスクロールを完了します。必要なエリア効果。
右側をディスプレイの幅に設定します。ここでは下部は高さと同じになります。
レイヤーのコードは次のとおりです。
< div id="slayer" style="position:absolute; 上: 120px; 左: 100px; クリップ: rect(0 340 120 0); 高さ: 120px; 背景色: #CCCCCC; レイヤー背景色: # CCCCCC; 境界線: 1px なし #000000; 幅: 670px" >
レイヤー内にいくつかの写真を水平に配置できますが、ここでは代わりにテーブルを使用します。上記で設定したレイヤーのサイズは、すべての画像を収容するのに十分なサイズです。
2. 次のコードはレイヤーのスクロール コードで、レイヤー マーク <div> の下に挿入します。
挿入するときは、layerW の値がクリップの右側の値 (ここでは 340) であることに注意してください。
< スクリプト言語="javascript" >
< !-- //hve により
varlayerW=340; //表示領域の幅を設定します。
varlayerH=parseInt(slayer.style.height);
varlayerL=parseInt(slayer.style.left);
varlayerT=parseInt(slayer.style.top);
var step=0; //スクロール値
関数 movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
mov(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
関数 moveover(){
クリアタイムアウト(movx);
}
関数 mov(a){
slayer.style.left = (ステップ+=a) + レイヤーL;
クリップL=0ステップ;
クリップR=レイヤーWステップ;
クリップB=レイヤーH;
クリップT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /スクリプト >
3. 別のレイヤーを挿入して「コントロールボタン」を配置します。
このレイヤーは前のレイヤーの下にあり、「コントロール ボタン」を配置するために使用されます。以下に示すように、位置は必要に応じて調整できます。ここではテーブルのカラーブロックをコントロールボタンとして使用します。矢印の形をした絵を 2 つ作成するとよいでしょう。
4.「Control Buttons」のタグ内に以下のコードを追加します。
テーブルタグの<td>内に追加します。画像をボタンとして使用する場合は、<img>タグ内に追加します。
左ボタン:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
右ボタン:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
上記のコードの意味は、マウスがボタンをポイントするとアクションが開始され、ボタンを押し続けると速度が上がり、マウスがボタンから離れるとアクションが停止し、- 記号は反対方向の動きを示します。
5.完了
マウスが「コントロールボタン」をポイントしている場合、マウスをクリックしたままにすると、スクロールが速くなります。
コード全体は次のとおりです (BODY 領域でコピーしてテストできます)
< div id="slayer" style="position:absolute; 上: 120px; 左: 100px; クリップ: rect(0 340 120 0); 高さ: 120px; 背景色: #CCCCCC; レイヤー背景色: # CCCCCC; 境界線: 1px なし #000000; 幅: 670px" >
< スクリプト言語="javascript" >
< !-- //hve により
varlayerW=340; //表示領域の幅を設定します。
varlayerH=parseInt(slayer.style.height);
varlayerL=parseInt(slayer.style.left);
varlayerT=parseInt(slayer.style.top);
var step=0; //スクロール値
関数 movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
mov(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
関数 moveover(){
クリアタイムアウト(movx);
}
関数 mov(a){
slayer.style.left = (ステップ+=a) + レイヤーL;
クリップL=0ステップ;
クリップR=レイヤーWステップ;
クリップB=レイヤーH;
クリップT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /スクリプト >
< テーブルのセルスペース="10" ボーダー="0" セルパディング="0" >
<tr bgcolor="#FFCC99" >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< td height="100" width="100" > </ /td >
< /tr >
< /table >
< /div >
< div id="Layer1" style="位置:絶対; 幅:344px; 高さ:20px; z-index:1; 左: 97px; 上: 244px" >
< テーブル幅="100%" 高さ="100%" >
<tr>
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover() ;movstar(1,20)" width="14" >< /td >
< td >< /td >
< td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover ();movstar(-1,20)" width="14" >< /td >
< /tr >
< /table >
< /div >