1. Fügen Sie eine Ebene in DreamWeaver ein und verwenden Sie diese Ebene als Scrollbereich. Stellen Sie die Parameter der Ebene wie folgt ein:
Setzen Sie die Layer-Nummer auf: slayer, das ist das ID-Attribut des Layers.
Die linken und oberen Werte geben die Position der Ebene auf der Seite an und können nach Bedarf eingestellt werden; hier sind es 100 und 120 Pixel.
Breite und Höhe entsprechen der Größe der Ebene und werden ebenfalls nach Bedarf eingestellt;
Clip bezieht sich auf den Anzeigebereich der Ebene, und der Teil außerhalb des Clips wird ausgeblendet. Wir verwenden diesen Anzeigebereich, um den rechten Teil der Ebene auszublenden, und steuern dann die Ebenenbewegung, während wir diesen Anzeigebereich steuern, um den Bildlauf abzuschließen Flächeneffekt, den wir wollen.
Stellen Sie rechts die Breite des Displays ein, hier 340; unten entspricht die Höhe.
Das Folgende ist der Code für die Ebene:
< div id="slayer" style="position:absolute; oben: 120px; links: 100px; Clip: rect(0 340 120 0); Höhe: 120px; Hintergrundfarbe: #CCCCCC; Ebenenhintergrundfarbe: # CCCCCC; Rand: 1px keine #000000; Breite: 670px" >
Wir können einige Bilder horizontal in der Ebene platzieren, hier verwenden wir stattdessen eine Tabelle. Die Größe der oben eingestellten Ebene reicht gerade aus, um alle Bilder aufzunehmen.
2. Der folgende Code ist der Layer-Scroll-Code, den wir unterhalb der Layer-Markierung <div> einfügen:
Beachten Sie beim Einfügen, dass der Wert von LayerW der Wert auf der rechten Seite des Clips ist, der hier 340 beträgt.
<script language="javascript" >
< !-- //von hve
var layerW=340; //Legen Sie die Breite des Anzeigebereichs fest
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //Bildlaufwert
Funktion movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
mov(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
Funktion moveover(){
clearTimeout(movx);
}
Funktion mov(a){
slayer.style.left = (step+=a) + layerL;
clipL=0-Schritt;
clipR=layerW-step;
clipB=layerH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+");
}
//-- >
</ /script >
3. Fügen Sie eine weitere Ebene ein, um den „Steuerknopf“ zu platzieren.
Diese Ebene befindet sich unter der vorherigen Ebene und dient zur Platzierung der „Steuerknöpfe“. Die Position kann wie unten gezeigt angepasst werden. Wir verwenden hier die Farbblöcke der Tabelle als Steuerschaltflächen. Besser wäre es, wenn wir zwei pfeilförmige Bilder erstellen würden.
4. Fügen Sie die folgenden Codes in die Tags von „Control Buttons“ ein.
Dies wird im Tabellen-Tag <td> hinzugefügt. Wenn Sie ein Bild als Schaltfläche verwenden, fügen Sie es im <img>-Tag hinzu.
Linke Taste:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Rechte Taste:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
Die Bedeutung des obigen Codes besteht darin, dass die Aktion startet, wenn die Maus auf die Schaltfläche zeigt, das Drücken und Halten der Schaltfläche beschleunigt wird, die Maus die Schaltfläche verlässt, um die Aktion zu stoppen, und das - Zeichen eine Bewegung in die entgegengesetzte Richtung anzeigt.
5. Abschließen
Wenn die Maus auf die „Steuertaste“ zeigt, wird das Scrollen nach links oder rechts beschleunigt. Durch Klicken und Halten der Maus wird das Scrollen beschleunigt.
Der gesamte Code lautet: (kann im BODY-Bereich kopiert und getestet werden)
< div id="slayer" style="position:absolute; oben: 120px; links: 100px; Clip: rect(0 340 120 0); Höhe: 120px; Hintergrundfarbe: #CCCCCC; Ebenenhintergrundfarbe: # CCCCCC; Rand: 1px keine #000000; Breite: 670px" >
<script language="javascript" >
< !-- //von hve
var layerW=340; //Legen Sie die Breite des Anzeigebereichs fest
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //Bildlaufwert
Funktion movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
mov(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
Funktion moveover(){
clearTimeout(movx);
}
Funktion mov(a){
slayer.style.left = (step+=a) + layerL;
clipL=0-Schritt;
clipR=layerW-step;
clipB=layerH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+");
}
//-- >
</ /script >
<Tabelle Cellspacing="10" Border="0" Cellpadding="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="position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px" >
<Tabellenbreite="100%" Höhe="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 >