Forum PHP.pl > [JavaScript]Slidujący div

Pomoc - Szukaj - Użytkownicy - Kalendarz

jagon

10.05.2011, 13:29:13

Witam, postaram się jak najprościej przedstawić swój problem. Otóż męczę się ze "slidującym" divem, problem w tym, że wyjezdza on ze skrajnej lewej strony. Chciałbym, aby jego "startem" był niebieski div. Najprościej mówiąc - chcę aby czerwony slajdujący div startował z początku niebieskiego diva.

Poniżej zamieszczam kod, liczę na pomoc.

slide.html

[HTML] pobierz, plaintext 
<html>
<head><title></title>
<script type="text/javascript" language="javascript" src="slide.js"></script>
</head>
<body>
 
<div style='position: absolute; margin: 50px; background: blue; width: 400; height: 400;'>
<div id="d1" style="position: absolute; left:-150px; background: red;">horizontally sliding div</div>
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

slide.js

[JAVASCRIPT] pobierz, plaintext 
//<![CDATA[
 
window.onload=function()
{
window.setTimeout('slideIt();');
window.setTimeout('slideIn();', 3000);
};
 
function slideIt()
{
 
var slidingDiv = document.getElementById("d1");
var stopPosition = 50;
 
if (parseInt(slidingDiv.style.left) < stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) + 7 + "px";
setTimeout(slideIt, 1);
}
}
 
function slideIn()
{
 
var slidingDiv = document.getElementById("d1");
var stopPosition = -150;
 
 
if (parseInt(slidingDiv.style.left) > stopPosition )
{
slidingDiv.style.left = parseInt(slidingDiv.style.left) - 7 + "px";
setTimeout(slideIn, 1);
}
 
}
//]]>
[JAVASCRIPT] pobierz, plaintext

t_e_l

10.05.2011, 17:31:23

Nie wiem czy dobrze myślę ale wydaje mi się, że wystarczy zmienić "var stopPosition = -150;" na "var stopPosition = 0;"

jagon

13.05.2011, 17:18:57

Po zmianie którą zaproponowałeś sprawa wygląda następująco: czerwony div w dalszym ciągu wyjezdza z maksymalnej lewej strony natomiast "chowając się" zatrzymuje się prawidłowo(na początku niebieskiego diva)

odświeżam...

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.