сейчас на сайте:
Лучшие сказки мира
Детектив и фантастика
Песни прошлых лет
Для досуга
смотреть оглавлениепримерразмер кода
<DIV style="position:absolute; left:0px; top:0px;width:200px;height:100px">This is a container for your contents</DIV>
Passing your mouse over this link Position 0,0 will show a container 200 pixels wide by 100 pixels high in the top left corner of this page at the X,Y co-ordinates 0,0.
In order to position the box elsewhere on the page enter a number for the left and/or top attribute.
Position 200px,210px
If you have scrolled the page this may not appear to be 210 pixels down.We are positioning in relation to the page top and not window top.
Note:If you have scrolled down the page do not mistake the top of the window for the top of the page.
You now have the information needed to place a layer anywhere on or off your page.
Each time you click on the link Move Layer you call function moveDiv() which will move the layer 100 pixels to the right until it disappears off screen.
We need to be able to identify this DIV so we give it an ID. The ID name can be any of your choosing.The reason we need the identity is because the script needs to know which DIV it is going to work with.
<DIV id="div1" style="position:absolute;left:10px; top:120px;width:200px;border:1px solid black">Layer 1</DIV>
<a href="#null" onclick="moveDiv1()">Move Layer 1</a><br>
To automate the above you would include the setTimeout method
Now you only have to click on the link Auto Move Layer once and function moveDiv() is called every 100 milliseconds by the setTimeout method.
<DIV id="div2" style="position:absolute; left:10px; top:150px;width:200px;border:1px solid black">Auto Move Layer</DIV>
<a href="#null" onclick="autoMove1()">Auto Move Layer</a><br>
An addition to the Auto Move Layer script is the method clearTimeout() to stop the layer once it has reached the edge of the page, otherwise the layer would carry on and on and on and on and .........
Click on the link Auto Move Layer 2, when the layer reaches the edge of the page it is repositioned back to zero
<DIV id="div3" style="position:absolute; left:10px; top:180px;width:200px;border:1px solid black">Auto Move Layer 2</DIV>
<a href="#null" onclick="autoMove2()">Auto Move Layer 2</a>
An addition to the Auto Move Layer 2 script is the method to return the layer back to its original position once it has reached the edge of the page, otherwise the layer would carry on and on and on and on and .........
This final example shows how to move the layer to the right and have it scroll back to its start position.
Auto Return
So the three items you need are:
Note;The active examples in this page use a relative position to keep the layers within the flow of this document.The copy & paste examples use an absolute position
Absolute positioning takes the element out of the natural flow of the document and could be shown over the top of other content within the page.
<DIV>A PARAGRAPH.</DIV>
<div class=example>Container.</SPAN>