| Autor | Zpráva | ||
|---|---|---|---|
| BuGeR Profil |
#1 · Zasláno: 1. 7. 2010, 22:11:09
Zdravím.
Již dělší dobu se snažím o takové padající objekty. Mají představovat tento znak: $. Pokusil jsem se něco vytvořit, vysledek je tu: http://live-fun.cz/tests/test.php . Problém je v tom, že vůbec nevím jak udělat to aby padaly všechny. Zdrojový kód: <script language="javascript" type="text/javascript" src="jquery.js"></script>
<div style="width:500px;height:500px;border:1px solid #000000">
<div id="1" align="center" style="position: absolute;top:1px">$</div>
<div id="2" align="center" style="position: absolute;top:1px">$</div>
<div id="3" align="center" style="position: absolute;top:1px">$</div>
<div id="4" align="center" style="position: absolute;top:1px">$</div>
<div id="5" align="center" style="position: absolute;top:1px">$</div>
</div>
<script>
vyska = 3;
sirka = Math.round(Math.random()*250);
function padej(id) {
if(vyska < 490) {
vyska=vyska+3;
if(Math.round(Math.random()*3) == 1) { sirka--; } else { sirka++; }
$("#"+id).css({top:vyska+"px",left:sirka+"px"});
}
}
setInterval("padej(1)", 1);
</script>Je to sice prasárna..ale vůbec nevím jak udělat aby padaly všechny..zkoušel jsem použít pole (na to počítaní výšky apod.), zkoušel jsem to tím setIntervalem spustit znovu ale s jiným parametrem (id). Nic bohužel nefunguje.. Nějaké nápady? B. |
||
| Petr ZZZ Profil |
#2 · Zasláno: 2. 7. 2010, 00:08:15
Hezké. :-) Taky by to šlo udělat animovaným gifem a ten hodit přes CSS na pozadí. Myslím si, že by ten gif ani nemusel být příliš veliký - jednak (vzhledem k obrovským jednolitým plochám) objemem dat a jednak co do rozměrů (počtu pixelů šířka krát výška), kdybys ho udělal šikovně tak, aby se mohl na pozadí opakovat, aniž by bylo poznat, že se opakuje. Pohyb dole by tedy musel navazovat na pohyb nahoře a případný pohyb přes pravý okraj by musel mít pokračování na levém okraji. Asi to bude piplačka; kdybych to měl dělat já, myslím bych tím strávil dlouhé hodiny, ale možná by se na to plynulé navazování dal vymyslet nějaký fígl.
|
||
| fajzen Profil |
#3 · Zasláno: 2. 7. 2010, 00:09:12 · Upravil/a: fajzen
BuGeR:
napríklad:
<div style="width:500px;height:500px;border:1px solid #000000">
<div class="dolar" align="center" style="position: absolute;top:1px">$</div>
<div class="dolar" align="center" style="position: absolute;top:1px">$</div>
<div class="dolar" align="center" style="position: absolute;top:1px">$</div>
<div class="dolar" align="center" style="position: absolute;top:1px">$</div>
<div class="dolar" align="center" style="position: absolute;top:1px">$</div>
</div>
<script>
function padej() {
$('.dolar').each(function() {
var vyska = parseInt($(this).css('top'), 10),
sirka = parseInt($(this).css('left'), 10);
if(vyska < 490) {
vyska = vyska + 3;
if(Math.round(Math.random() * 3) == 1)
sirka--;
else
sirka++;
$(this).css({ top : vyska, left : sirka });
}
});
}
$().ready(function() {
$('.dolar').each(function() {
$(this).css('left', Math.round(Math.random()*250));
});
setInterval(padej, 50);
});
</script>
Edit: chýba ochrana proti prekročeniu pravého a ľavého okraja, ale to už si dorobíš :) |
||
| BuGeR Profil |
#4 · Zasláno: 2. 7. 2010, 00:10:48 · Upravil/a: BuGeR
Petr ZZZ:
o problém je v tom, že to musí být v "textu" (viz http://diskuse.jakpsatweb.cz/?action=vthread&forum=8&topic=112085&page=-1 ) fajzen: Děkuji moc! Ještě jsem se chtěl zeptat, nešlo by to udělat tak, aby ty dolary padali postupně? Třeba aby byli 5 sekund vypouštění, když jich přidam např. 100 tak to pada všechno ve stejné výšce a vypadá to divně ( http://live-fun.cz/tests/php.php ) |
||
| Chamurappi Profil |
#5 · Zasláno: 2. 7. 2010, 01:07:33
Reaguji na BuGeRa:
Taháš všehoschopnou externí knihovnu jen proto, abys zaměřil element podle ID? To, aby dolary létaly s větší pravděpodobností napravo než nalevo, je záměr? Reaguji na fajzena: „parseInt($(this).css('top'), 10)“ Není trochu zbytečné zjišťovat si z vypočtené hodnoty ve stylech číslo, které jsi tam sám nastavil? Styly slouží k formátování výstupu, brát je jako vstup je nekoncepční. „$().ready(function() {“ To je tam zbytečně. |
||
| fajzen Profil |
#6 · Zasláno: 2. 7. 2010, 07:16:42
Chamurappi:
„Není trochu zbytečné zjišťovat si z vypočtené hodnoty ve stylech číslo, které jsi tam sám nastavil? Styly slouží k formátování výstupu, brát je jako vstup je nekoncepční.“ V tomto prípade, kedy majú všetky doláre rovnakú výšku, asi hej... Ak by mal ale každý z nich inú výšku (viď posledná BuGeRova požiadavka), musel by som uchovávať údaj o výške pre každý dolár zvlášť (najskôr asi v poli, prípadne ho zviazať s elementom cez $.data)... A ak by ich tam bolo veľa, zdá sa mi lepšie radšej si jeho aktuálnu výšku vypočítať... Nekoncepčné? Možno... Ale funguje „To je tam zbytečně.“ Zase, v tomto prípade áno, funguje to aj bez toho... Ak by však skript bol v samostatnom súbore prilinkovanom v <head>, bol by v načítaný z cache prehliadača a dokument by bol objemnejší, takže by jeho celé stiahnutie zabralo nejaký čas, alebo by sa používali obrázky, alebo niečo, tak by s tým mohol byť problém... Pokiaľ viem, pri písaní kódu pomocou jQuery je skrátka dobrým zvykom používať túto funkciu BuGeR: Samozrejme by sa to dalo, je niekoľko možností - na riadku 29 okrem počiatočnej šírky náhodne vyberieš aj počiatočnú výšku - na riadku 15 nebude počet pixelov, o koľko sa dolár posunie, daný pevne, ale vyberie sa náhodne z nejakého intervalu - prípadne sa tam dala nejaká náhoda, či sa dolár vôbec v tomto kole posunie (ale to by sa potom teoreticky mohlo stať, že dolár sa na určitý čas "zasekne" - dalo by sa to vylepšiť tak, že pravdepodobnosť, že sa posunie, by v čase narastala, ak by vyšlo že má stáť) alebo aj nejaká iná možnosť... |
||
| BuGeR Profil |
#7 · Zasláno: 2. 7. 2010, 11:09:46
Chamurappi:
Taháš všehoschopnou externí knihovnu jen proto, abys zaměřil element podle ID? Ne :) tohle je jen špička ledovce toho co tam bude a ta knihovna je potřeba To, aby dolary létaly s větší pravděpodobností napravo než nalevo, je záměr? Ano fajzen: Zkusím to, dám vědět :) |
||
|
Časová prodleva: 4 roky
|
|||
| Šimon Profil * |
#8 · Zasláno: 21. 3. 2014, 19:46:42
Ahoj můžu se zeptat jak udělat ,aby v pozadí padaly číslice????
Děkuji Šimon |
||
|
Časová prodleva: 10 let
|
|||
0