Autor | Zpráva | ||
---|---|---|---|
Markii Profil * |
#1 · Zasláno: 13. 11. 2009, 16:17:37
Ahoj,nevíte prosím jak udělat tento efekt?
http://www.blesk.cz/ maj tam hlavní obrázek a pod ním tři. Nevíte jak se dělá to prolnutí z černé? |
||
Chamurappi Profil |
#2 · Zasláno: 13. 11. 2009, 16:23:37
|
||
Markii Profil * |
#3 · Zasláno: 13. 11. 2009, 16:35:17
Vím co je cyklus
for (i=0; i <= 100; i++) { } a vím jak používat průhlednost, ale nevím jak to dát dohromady, poradíte? potřebuju tedy ze stylu k obrázku opacity: 1.0; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; dostat opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0; -khtml-opacity: 0; poradíte jak na to přesně? javascript jde bohužel mimo mě docela, mám jen základy |
||
Chamurappi Profil |
#4 · Zasláno: 13. 11. 2009, 16:59:19 · Upravil/a: Chamurappi
Reaguji na Markiiho:
Cyklus můžeš nechat plavat, budeš asi potřebovat funkci setInterval. A nebo ne. Zkusíme ten cyklus a setTimeout. Pokusím se napsat to alespoň trochu názorně: <script> function schovat(co) { var obr = document.getElementById(co); for(var i = 1; i <= 20; i++) { setTimeout(krokAnimace(obr, i / 20), i * 30); } } function krokAnimace(element, krok) { // je zapotřebí vrátit novou funkci — ta se teprve zavolá při načasovaném timeoutu, zatímco krokAnimace se volá dvacetkrát při načasování return function() { var o = 1 - krok; var of = Math.round((1 - krok) * 100); // tento řádek nastavuje atribut style element.style.cssText = "\ opacity: " + o + ";\ filter: alpha(opacity=" + of + ");\ -moz-opacity: " + o + ";\ -khtml-opacity: " + o + ";\ "; }; } </script> <img id="obrazek" src="http://diskuse.jakpsatweb.cz/img/logo.gif"><br> <input type="button" value="Plynule schovat" onclick="schovat('obrazek')"> |
||
Markii Profil * |
#5 · Zasláno: 13. 11. 2009, 17:07:31
Tyjo opravdu moc děkuji za věnovaný čas, pomohlo moc !
|
||
Markii Profil * |
Takže upravil jsem to aby se to nezesvětlovalo ale ztmavovalo:
teda ztmavovalo a né zesvětlovalo <script> function ukazat(co) { var obr = document.getElementById(co); for(var i = 1; i < 100; i++) { setTimeout(krokAnimace(obr, i / 80), i * 80); } } function krokAnimace(element, krok) { return function() { var o = 0 + krok; var of = Math.round((0 + krok) * 100); element.style.cssText = "\ opacity: " + o + ";\ filter: alpha(opacity=" + of + ");\ -moz-opacity: " + o + ";\ -khtml-opacity: " + o + ";\ "; }; } </script> Jenže nějak to blbne. Po prvním spuštění skriptu je to OK, ale když na ten obrázek, který to spouští, ukážu znova, tak to blbne a blbě problikává. spouštím to takhle: je to taková jednoduchá fotogalerie, omlouvám se za prasácký kód: //fotka která to mění echo "<img id = \"foto\" name = \"foto\" alt = \"$radek[titulek]\" style = \"width:530px;\" src = \"../foto/530/$line[fotka].jpg\">"; //generování náhledových fotek z adresáře $cesta = $_SERVER['DOCUMENT_ROOT']."/galerie/$radek[id]"; if (file_exists($cesta)) { $slozka = dir($cesta); while($soubor=$slozka->read()) { if ($soubor=="." || $soubor=="..") continue; echo "<img class = \"nahled\" onmouseover=\"foto.src='../galerie/$radek[id]/$soubor'; className='nepruhledne'; \" onmouseover=\"ukazat(fotka);\" alt = \"$radek[titulek]\" src = \"../galerie/$radek[id]/$soubor\"> "; } $slozka->close(); } Moderátor Chamurappi: Sloučeno sdělení ze tří příspěvků.
|
||
Chamurappi Profil |
#7 · Zasláno: 13. 11. 2009, 20:59:29 · Upravil/a: Chamurappi
Reaguji na Markiiho:
„teda ztmavovalo a né zesvětlovalo“ Ten můj skript ani neztmavuje, ani nezesvětluje — on zprůhledňuje. Pokud je pod obrázkem černo, bude to vypadat jako ztmavování. „setTimeout(krokAnimace(obr, i / 80), i * 80);“ Jaký smysl tam podle tebe má ta první osmdesátka? V cyklu, kde „i“ mění od jedné do stovky se ten druhý argument bude měnit od 1 / 80 do 100 / 80. Tzn. budeš nastavovat „opacity: 1.25“. |
||
Časová prodleva: 14 let
|
0