| 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