1. Insérez un calque dans DreamWeaver et utilisez ce calque comme zone de défilement. Définissez les paramètres du calque comme suit :
Définissez le numéro de couche sur : slayer, qui est l'attribut ID de la couche.
Les valeurs de gauche et du haut sont la position du calque sur la page et peuvent être définies selon les besoins ; elles sont ici de 100 et 120 pixels.
La largeur et la hauteur correspondent à la taille du calque et sont également définies selon les besoins ;
Le clip fait référence à la zone d'affichage du calque, et la partie à l'extérieur du clip est masquée. Nous utilisons cette zone d'affichage pour masquer la partie droite du calque, puis contrôlons le mouvement du calque tout en contrôlant cette zone d'affichage pour terminer le défilement. effet de zone que nous souhaitons.
Réglez la droite sur la largeur de l'affichage, ici à 340 ; le bas est égal à la hauteur.
Voici le code de la couche :
< div id="slayer" style="position:absolute; haut: 120px; gauche: 100px; clip: rect(0 340 120 0); hauteur: 120px; couleur d'arrière-plan: #CCCCCC; couleur d'arrière-plan du calque: # CCCCCC ; bordure : 1px aucun #000000 ; largeur : 670px" >
Nous pouvons placer quelques images horizontalement dans le calque, ici nous utilisons plutôt un tableau. La taille du calque défini ci-dessus est juste suffisante pour accueillir toutes les images.
2. Le code suivant est le code de défilement des calques, que nous insérons sous la marque du calque <div> :
Lors de l'insertion, notez que la valeur de layerW est la valeur sur le côté droit du clip, qui est ici 340.
< langage de script="javascript" >
< !-- //par hve
var layerW=340; //Définit la largeur de la zone d'affichage
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //valeur de défilement
fonction movstar(a,heure){
si (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
déplacer(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
fonction moveover(){
clearTimeout(movx);
}
fonction mov(a){
slayer.style.left = (étape+=a) + layerL;
clipL=0-pas ;
clipR=coucheW-étape ;
clipB=coucheH;
clipT=0 ;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /script >
3. Insérez un autre calque pour placer le "bouton de commande".
Ce calque est situé en dessous du calque précédent et est utilisé pour placer les « boutons de contrôle ». La position peut être ajustée selon les besoins, comme indiqué ci-dessous. Nous utilisons ici les blocs de couleur du tableau comme boutons de commande. Il serait préférable de créer deux images en forme de flèche.
4. Ajoutez les codes suivants dans les balises de « Boutons de contrôle ».
Ceci est ajouté dans la balise du tableau <td>. Si vous utilisez une image comme bouton, ajoutez-la dans la balise <img>.
Bouton gauche :
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Bouton droit :
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
La signification du code ci-dessus est que lorsque la souris pointe sur le bouton, l'action démarre, appuyer et maintenir le bouton accélère, la souris quitte le bouton pour arrêter l'action, et le signe - indique un mouvement dans la direction opposée.
5. Terminer
Lorsque la souris pointe sur le « bouton de contrôle », elle défilera vers la gauche ou la droite. Cliquer et maintenir la souris accélérera le défilement.
L'intégralité du code est : (peut être copié et testé dans la zone CORPS)
< div id="slayer" style="position:absolute; haut: 120px; gauche: 100px; clip: rect(0 340 120 0); hauteur: 120px; couleur d'arrière-plan: #CCCCCC; couleur d'arrière-plan du calque: # CCCCCC ; bordure : 1px aucun #000000 ; largeur : 670px" >
< langage de script="javascript" >
< !-- //par hve
var layerW=340; //Définit la largeur de la zone d'affichage
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //valeur de défilement
fonction movstar(a,heure){
si (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
déplacer(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
fonction moveover(){
clearTimeout(movx);
}
fonction mov(a){
slayer.style.left = (étape+=a) + layerL;
clipL=0-pas ;
clipR=coucheW-étape ;
clipB=coucheH;
clipT=0 ;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /script >
< table cellpacing="10" border="0" cellpadding="0" >
<tr bgcolor="#FFCC99" >
< td hauteur="100" largeur="100" > </ /td >
< td hauteur="100" largeur="100" > </ /td >
< td hauteur="100" largeur="100" > </ /td >
< td hauteur="100" largeur="100" > </ /td >
< td hauteur="100" largeur="100" > </ /td >
< td hauteur="100" largeur="100" > </ /td >
< /tr >
< /table >
< /div >
< div id="Layer1" style="position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px" >
< largeur du tableau="100%" hauteur="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 >