Autor Zpráva
dospisil
Profil *
Nazdar,
potřebuju udělat na vrchu stránky ve smyčce se pohybující pás obrázků. (Asi deset fotek vedle sebe, co se budou pohybovat zleva doprava automaticky po načtení stránky. Jak ta nejvíc vpravo zmizí, objeví se vzápětí vlevo a pohybuje se s ostatníma zase doprava. A tak pořád dokola. Taková volovinka, prostě.) Má to být jakože nějaká prezentace nebo co..., to je jedno. Vůbec nevím jak na to. Zatím teda hledám na netu, ale říkal jsem si, kdybyste měli nějaký tip, jak to zpracovat, byl bych hodně vděčnej. Diky moc. Tonda
perwin
Profil
dospisil:
Můžeš zkusit tento můj pokus (musíš si pojmenovat nějaké obrázky jako 1.jpg až 10.jpg, je jedno jaké):
  <marquee align="middle" width="1300" height="66" behavior="scroll" bgcolor="whitesmoke" direction="right" scrollamount="5">
  <img src="1.jpg" border="2" alt="IMG 1" width="70" height="52" style="margin: 5px;">
  <img src="2.jpg" border="2" alt="IMG 2" width="70" height="52" style="margin: 5px;">
  <img src="3.jpg" border="2" alt="IMG 3" width="70" height="52" style="margin: 5px;">
  <img src="4.jpg" border="2" alt="IMG 4" width="70" height="52" style="margin: 5px;">
  <img src="5.jpg" border="2" alt="IMG 5" width="70" height="52" style="margin: 5px;">
  <img src="6.jpg" border="2" alt="IMG 6" width="70" height="52" style="margin: 5px;">
  <img src="7.jpg" border="2" alt="IMG 7" width="70" height="52" style="margin: 5px;">
  <img src="8.jpg" border="2" alt="IMG 8" width="70" height="52" style="margin: 5px;">
  <img src="9.jpg" border="2" alt="IMG 9" width="70" height="52" style="margin: 5px;">
  <img src="10.jpg" border="2" alt="IMG 10" width="70" height="52" style="margin: 5px;">
  </marquee>

Je to úplná šílenost...
Ale bohužel nejdříve musí zajet celý pruh fotek pryč, a pak se teprv zobrazí na začátku znovu ta fotka, co se i předtím zobrazila jako první.
Jestli chceš, aby ten pruh fotek dojel až na druhou stranu a tam se odrazil a jel zpátky a takhle se znovu a znovu odrážel od krajů sem a tam,
změň behavior z hodnoty scroll na alternate - a pokud chceš, aby to dojelo na druhou stranu, a tam se to napořád zastavilo, změň to behavior na slide.
Viz. www.jakpsatweb.cz/html/rozsireni.html#marquee
Medvídek
Profil
dospisil:
Zkus toto: http://www.smoothdivscroll.com/#quickdemo
dospisil
Profil *
Diky.
Ty fotky tam prostě musí být pořád a všechny nebo alespoň většina z nich a navíc se doplňovat, nemůže tam být volné místo, to bych asi dostal pěkně po uších...
Tohle je fakt neuvěřitelnej krám. Vůbec nevím, proč jsem tuhle práci bral... Už se s tím dělám od rána.
Hele, já už mám dneska dost. Díky a čus. Jestli tě ještě něco napadne, hoď to sem a uvidíme.
Witiko
Profil
dospisil:
Asi si to budeš muset napsat sám přímou změnou stylů pomocí časovačů. Tzn. vytvoříš obrázky a pak třeba každých 1000 / 60 ms budeš měnit jejich pozici. U prohlížečů s podporou CSS3 by se to mohlo nechat na transition vlastnosti.
dospisil
Profil *
Čau,
tohle mě funguje, ale furt řeším 2 problémy:
1) zalézá to za okraj obrazovky - vypadá to blbě. Potřebuju, aby to, kde se bude pohyb doprava končit, nastavit na 900px zleva (aby animace jela v hranicích left:300px až vpravo např. 900px). Tohle musím nějak vypočítat, zatím nevím jak.
2) Jak udělat, aby když první obrázek zmizí za hranicí zobrazovacího pole, tedy vpravo, aby se zase vykoukl vlevo a mohl si to štrádovat s ostatníma zase doprava a ten další taky a ten další taky atakdál. Jak se nastavuje smyčka?
Pokud byste měl někdo tip, díky moc. Tonda

<html>
<head>
<style type="text/css">
#animace {position: absolute; left: 300px; top: 100px; width: 600px;}
#animace img {margin: 0px;, border-style: solid, 0px;}
</style>	
</head>
 
<body>
<div id="animace">

<span id="vobrazky" style="position: relative;">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
<img src="obrazky/000001.jpg" height="80" width="60">
</span>

<script> 
var stylTextu = document.getElementById("vobrazky").style;
var poziceX = 0; 
var poziceY	= 0; 	
 
function start(){
	window.setInterval("krok(5,0)", 100) 	
	}
 
function krok(stepX,stepY){
		
	poziceX += stepX;
	poziceY += stepY;
	
	stylTextu.left = poziceX + "px";
	stylTextu.top = poziceY + "px";
}
 
start() 	
</script>
</div> 
 
</body>
</html>
Witiko
Profil
dospisil:
Můžeš získat šířku divu #vobrazky pomocí offsetWidth a jakmile k tomuto okraji dojedeš, přesuneš obrázek opět na začátek.
dospisil
Profil *
Hele, díky za radu. Javascript se učím teprve od rána. Dodneška jsem to nepoužíval, takže jsem z toho trochu tumpachovej.
Vymyslel jsem mezitím velkolepej kód, ale nechce chodit. Nemrknul by ses prosím tě na to.
<html>
<head>
<style type="text/css">
#animace {position: absolute; left: 300px; top: 100px; offsetWidth: 900px;}
#animace img {margin: 0px;, border-style: solid, 0px;}
</style>	
</head>
 
<body>
<div id="animace">



<span id="obrazek1" style="position: relative;">
<img src="obrazky/000001.jpg" height="80" width="60">
</span>

<span id="obrazek2" style="position: relative;">
<img src="obrazky/000001.jpg" height="80" width="60">
</span>

<span id="obrazek3" style="position: relative;">
<img src="obrazky/000001.jpg" height="80" width="60">
</span>

<span id="obrazek4" style="position: relative;">
<img src="obrazky/000001.jpg" height="80" width="60">
</span>

<span id="obrazek5" style="position: relative;">
<img src="obrazky/000001.jpg" height="80" width="60">
</span>



<script>
var n = 1;
var label = obrazek + n; 

while(n < 5) 
{n += 1;


var obrazek = document.getElementById"(label)".style;
var poziceX = 0; 
var poziceY = 0;

 
function start(){window.setInterval("krok(5,0)", 100) }
 
function krok(stepX,stepY){
		
	poziceX += stepX;
	poziceY += stepY;
	
	obrazek.left = poziceX + "px";
	obrazek.top = poziceY + "px"; 

if( obrazek.left == 300 + "px")

 {poziceX = 0;}}


if (n == 5) 
{n == 1;}

 
start()} 	
</script>
</div> 
 
</body>
</html>

Witiko
Profil
dospisil:
Javascript se učím teprve od rána
Pokusím se shrnou vše, co vidím.
document.getElementById"(label)" -> document.getElementById("label")
window.setInterval("krok(5,0)", 100) -> setInterval(function() {krok(5,0);}, 100); #proč
if(n == 5) {n == 1;} -> if(n == 5) n = 1;

To jsou direktní syntaktické problémy. Hlavní problém scriptu bude ale v jeho celkovém návrhu. Uvědomuješ si, že díky if(n == 5) n = 1; na konci while smyčky způsobíš, že smyčka bude nekonečná?
peta
Profil
Lze udeat i tohle:
<img1><img2><img3><img4>
JS: +img x2 (pripadne mene, podle sirky okenka)
<img1><img2><img3><img4><img1><img2><img3><img4>
JS: js casovace + css clip (to uz mas)
Pripadne zkousel jsi ten tag marque misto sloziteho js? #2

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0