1. Insert a layer in DreamWeaver and use this layer as the scroll area. Set the parameters of the layer as follows:
Set the layer number to: slayer, which is the ID attribute of the layer.
The left and top values are the position of the layer on the page and can be set as needed; here they are 100 and 120 pixels.
Width and height are the size of the layer and are also set as needed;
Clip refers to the display area of the layer, and the part outside the clip is hidden. We use this display area to hide the right part of the layer, and then control the layer movement while controlling this display area to complete the scrolling area effect we want.
Set the right to the width of the display, here to 340; the bottom is equal to the height.
The following is the code for the layer:
< div id="slayer" style="position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: # CCCCCC; border: 1px none #000000; width: 670px" >
We can place some pictures horizontally in the layer, here we use a table instead. The size of the layer set above is just enough to accommodate all images.
2. The following code is the layer scrolling code, which we insert below the layer mark <div>:
When inserting, note that the value of layerW is the value on the right side of the clip, which is 340 here.
< script language="javascript" >
< !-- //by hve
var layerW=340; //Set the width of the display area
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //scroll value
function movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
mov(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
function moveover(){
clearTimeout(movx);
}
function mov(a){
slayer.style.left = (step+=a) + layerL;
clipL=0-step;
clipR=layerW-step;
clipB=layerH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /script >
3. Insert another layer to place the "control button".
This layer is located below the previous layer and is used to place the "control buttons". The position can be adjusted as needed, as shown below. We use the color blocks of the table as control buttons here. It would be better if we make two arrow-shaped pictures.
4. Add the following codes in the tags of "Control Buttons".
This is added in the table tag <td>. If you use a picture as a button, add it in the <img> tag.
Left button:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Right button:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
The meaning of the above code is that when the mouse points to the button, the action starts, pressing and holding the button speeds up, the mouse leaves the button to stop the action, and the - sign indicates movement in the opposite direction.
5. Complete
When the mouse points to the "Control Button", it will scroll left or right. Clicking and holding the mouse will speed up the scrolling.
The entire code is: (can be copied and tested in the BODY area)
< div id="slayer" style="position:absolute; top: 120px; left: 100px; clip: rect(0 340 120 0); height: 120px; background-color: #CCCCCC; layer-background-color: # CCCCCC; border: 1px none #000000; width: 670px" >
< script language="javascript" >
< !-- //by hve
var layerW=340; //Set the width of the display area
var layerH=parseInt(slayer.style.height);
var layerL=parseInt(slayer.style.left);
var layerT=parseInt(slayer.style.top);
var step=0; //scroll value
function movstar(a,time){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
mov(a);
movx=setTimeout("movstar("+a+","+time+")",time);
}
function moveover(){
clearTimeout(movx);
}
function mov(a){
slayer.style.left = (step+=a) + layerL;
clipL=0-step;
clipR=layerW-step;
clipB=layerH;
clipT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /script >
< table 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" >
< table width="100%" height="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 >