DW makes controllable horizontal scrolling

1. Insert a layer in the Dreamweaver, which is the rolling area. The parameters for the set layer are as follows:





sets the layer number to: Slayer, which is the id attribute of the layer.





the value on the left and the top is the position of the layer on the page that you want to set on your own; Here are 100 and 120 pixels.





width and height is the size of the layer, also set according to need;




The
clip is the display area of the layer, which is hidden outside the clip, and we use this display area to hide the right part of the layer, and then the control layer moves to control the display area to complete the scrolling area effect we want.





set to the right to display the width, here is 340, the next equals high.





The following layer code:





"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 put some pictures sideways in the layers, and here we'll use a table instead.  The layer above is set to accommodate all pictures.





2. The following code is the layer scrolling code, which we insert below the layer tag, div:





When inserting, note that the value of LAYERW is the value of the clip (clip) right, here is 340.





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&amp;&amp;step >-parseint (slayer.scrollwidth) +layerw a >0&amp;&amp;step< 0)


mov (a);


movx=settimeout ("Movstar" ("+a+", "+time+") ", Time";


} 


function Movover () {


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 >





sets the layer number to: Slayer, which is the id attribute of the layer.





the value on the left and the top is the position of the layer on the page that you want to set on your own; Here are 100 and 120 pixels.





width and height is the size of the layer, also set according to need;




The
clip is the display area of the layer, which is hidden outside the clip, and we use this display area to hide the right part of the layer, and then the control layer moves to control the display area to complete the scrolling area effect we want.





set to the right to display the width, here is 340, the next equals high.





The following layer code:





"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 put some pictures sideways in the layers, and here we'll use a table instead.  The layer above is set to accommodate all pictures.





2. The following code is the layer scrolling code, which we insert below the layer tag, div:





when inserting, note that LAYERW value is the value of the clip (clip) right, here is 340.





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&amp;&amp;step >-parseint (slayer.scrollwidth) +layerw a >0&amp;&amp;step< 0)


mov (a);


movx=settimeout ("Movstar" ("+a+", "+time+") ", Time";


} 


function Movover () {


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 a layer and place the control button.





This layer is located below the front layer, used to place the "control button", the position can be adjusted to the needs of the following figure. We use the form's color block as the control button, and it would be better if we made two-arrow-shaped pictures.





4.  In the "control button" tag, add the following code separately.





this is added to the table tag, TD, if you use the picture to make the button is added 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 when the mouse point button to start the action, press and hold the speed, the mouse left button to stop the action,-the number is the opposite direction movement.





5. Complete





when the mouse points to the control button, it scrolls left or right, and clicking the mouse will speed up the scrolling.





All code is: (Can be copied in the Body area test)





"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&amp;&amp;step >-parseint (slayer.scrollwidth) +layerw a >0&amp;&amp;step< 0)


MOV (a);


movx=settimeout ("Movstar" ("+a+", "+time+") ", Time";


} 


function Movover () {


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=" border= "0" cellpadding= "0" >


tr bgcolor= "#FFCC99" >


TD height= "Width=" and "/td"


TD height= "Width=" "/td >


TD height= "Width=" and "/td"


TD height= "Width=" and "/td"


TD height= "Width=" and "/td"


TD height= "Width=" and "/td"


/tr >


/table >


/div >


"Div id=" Layer1 "style=" Position:absolute; width:344px; &gt;

</div>