| Autor | Zpráva | ||
|---|---|---|---|
| Smith.S Profil |
#1 · Zasláno: 20. 11. 2012, 22:24:22
Ahoj, mam dva obrázky dejme tomu obr1.png a obr2.png jak udělat aby se pomalu překrývály mám to takto a jen se to rychle změní přeblikne.
Díky za případné rady klidně mi doporučte třeba i nějakou dobrou knihu s efekty. <img src="images/obr1.png" onmouseover="this.src = 'images/obr2.png';" onmouseout="this.src = 'images/obr1.png';"> |
||
| margin Profil * |
#2 · Zasláno: 21. 11. 2012, 02:05:51
Pokud by ti stačila funkčnost přechodového efektu jen v moderních prohlížečích, tak to jde velice jednoduše bez JS takto:
http://jsfiddle.net/7Lped/16/ Pokud bys vyžadoval funkčnost napříč všemi běžně používanými prohlížeči, místo CSS transitions by se musela měnit průsvitnost obrázků JavaScriptem. Smith.S: „klidně mi doporučte třeba i nějakou dobrou knihu s efekty“ Pro jistotu, hledáš knihu, nebo knihovnu s efekty? |
||
| Smith.S Profil |
#3 · Zasláno: 21. 11. 2012, 09:22:36
Ano knihu a pokud znate nejakou dobrou tak mi ji sem prosim supnete a muzete treba i tu knihovnu. Dik
|
||
| Chamurappi Profil |
#4 · Zasláno: 21. 11. 2012, 09:51:46
Reaguji na Smithe.S:
Na animace jde napsat jednoduchá obecná funkce: function animace(krok, delka)
{
var start = new Date().getTime();
var interval = setInterval(function()
{
var t = (new Date().getTime() - start) / delka;
if(t > 1)
{
t = 1;
clearInterval(interval);
}
krok(t);
}, 13);
krok(0);
}Příklad použití na sekundové měnění průsvitnosti obrázku: var obrazek = document.getElementById("ídéčko");
animace(function(t)
{
if(typeof obrazek.filters == "object")
obrazek.style.filter = "alpha(opacity=" + Math.round(t * 100) + ")";
else
obrazek.style.opacity = obrazek.style.MozOpacity = t;
}, 1000);t uvnitř funkce nabývá hodnot od 0 do 1, takže pro obrácený směr animace stačí používat 1 - t.
Reaguji na margina: „jen v moderních prohlížečích“ Přijde mi lepší místo kastování prohlížečů na moderní a nemoderní psát buď „jen v některých“, nebo vyjmenovat verze. Ten stav modernosti je pomíjivý a do jisté míry i subjektivní – někdy ve vztahu k pisateli/čtenáři, jindy ve vztahu k oblasti, o níž je řeč. |
||
| margin Profil * |
#5 · Zasláno: 21. 11. 2012, 10:14:55
obrazek.style.MozOpacity bych vynechal, už Firefox 0.9 uměl opacity bez prefixu.
|
||
|
Časová prodleva: 11 let
|
|||
0