Dreamweaver make controllable horizontal scrolling

Source: Internet
Author: User
Tags add insert dreamweaver
dreamweaver| Control

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



Set 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 can be set on its 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 of the clip, we use this display area to hide the right part of the layer, and then control the layer to move and control the display area to complete the scrolling area effect we want.

Set the right to show the width, here is 340, the next equals high.

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

2. The following code is the layer scrolling code, we insert the layer tag < div > under:

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&&step >-parseint (slayer.scrollwidth) +layerw| | A >0&&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 in the form tag < td > If you use the Picture button then add it to the < IMG > tag.

left button:



Right button:



The meaning of the above code is when the mouse points to the 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 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&&step >-parseint (slayer.scrollwidth) +layerw| | A >0&&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= "ten" border= "0" cellpadding= "0" >

< tr bgcolor= "#FFCC99" >

< TD height= "Width=" > </td >

< TD height= "Width=" > </td >

< TD height= "Width=" > </td >

< TD height= "Width=" > </td >

< TD height= "Width=" > </td >

< TD height= "Width=" > </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= "width=" ></td >

< TD ></td >

< TD bgcolor= "#CCCCCC" height= "width=" ></td >

</tr >

</table >

</div >



Related Article

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.