| Autor | Zpráva | ||
|---|---|---|---|
| Halda Profil |
#1 · Zasláno: 1. 7. 2011, 21:55:46
Zdarec,
příliš Javaskript neovládám, vždycky maximálně někam nasadím nějaký skript, takže :-D mi nepokládejte prosím žádné složité otázky. Potřebuji tady tenhle skript http://www.jakpsatweb.cz/javascript/priklady/skryvani-odkryvani.html, aby se odkryl plynule a ne skokově? :-) Vím, že se ttu už mnohokrát něco podobného řešilo, ale nikde jsem nenašel mé konkrétní řešení. S díky Martin |
||
| Pan X Profil |
#2 · Zasláno: 1. 7. 2011, 23:33:28
|
||
| pcmanik Profil |
#3 · Zasláno: 2. 7. 2011, 07:47:11
Pan X:
Kvoli jednemu efektu, cely framework? Trocha hlupost nie? Staci pouzit miestne hladanie, toto sa tu uz riesilo zopar krat. |
||
| Pan X Profil |
#4 · Zasláno: 3. 7. 2011, 23:29:30 · Upravil/a: Pan X
Možná jo, možná ne. Řekl bych že je to věc názoru. Zas tak velký není aby se to nějak výrazně projevilo na webu a co se týče samotného implementování do stránky mi přijde pro začátečníka (s minimální znalostí js) daleko jednoduší si upravit některé věci podle manuálu než se hrabat v cizím kódu. Tam už je ta znalost potřeba více.
Ostatně, jQuery má dokumentaci v celku přehlednou a návodů na internetu je hafo, takže snáz nalezne vysvětlení k jQuery než k nějakému kousku kódu odtud |
||
| Witiko Profil |
#5 · Zasláno: 4. 7. 2011, 11:51:05 · Upravil/a: Witiko
Pan X:
„takže snáz nalezne vysvětlení k jQuery než k nějakému kousku kódu odtud“ Myslím, že nejsem jediný, kdo je tu ochotný a schopný vysvětlit libovolný kód, co zasílá. „jQuery má dokumentaci“ Nejsem žádný bojovník proti jQuery, nicméně takovýhle přístup mě štve. Konkrétně nabídnutí začátečníkovi neznalému alternativ jQuery jako jediné správné řešení a tváření se, jako by mu tím dělal službu. Co takhle vysvětlit, co jQuery je, že jsou tu desítky až stovky javascriptových frameworků, případně jich několik odkázat (nebo odkázat na korespondující sekci v FAQ)? Popřípadě vysvětlit, že tak stupidní problém, jako je tenhle lze řešit kódem o pár řádcích i bez jQuery? Přestal bych automaticky usuzovat, že návštěvník je idiot a místo odkazu na jQuery dokumentaci a smajlíku, což se, s frekvencí, jakou se tu tento druh odpovědí objevuje, podle mého blíží porušení pravidel I, II i IV pro odpovídající, bych buď napsal něco smysluplného nebo bych raději nepsal nic. Halda: Použil bych něco takového: <!doctype html>
<html>
<head>
<meta charset="windows-1250">
<title>Skrývající se text</title>
</head><body>
<p id="text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
<button onclick="přerušitAnimaci(); přerušitAnimaci = skryj(element, 2000);">Skrýt během 2s</button>
<button onclick="přerušitAnimaci(); přerušitAnimaci = zobraz(element, 2000);">Odkrýt během 2s</button>
<button onclick="přerušitAnimaci(); přerušitAnimaci = skryj(element, 500);">Skrýt během 0.5s</button>
<button onclick="přerušitAnimaci(); přerušitAnimaci = zobraz(element, 500);">Odkrýt během 0.5s</button>
<script>
var snímkůZaSekundu = 30,
element = document.getElementById("text"),
přerušitAnimaci = new Function;
function nastavViditelnost(element, opacity) {
if("filters" in element) // Internet Explorer
element.style.filter = opacity === 100?"":"alpha(opacity=" + opacity + ")";
else { // Ostatní prohlížeče
element.style.opacity =
element.style.MozOpacity =
element.style.KhtmlOpacity = opacity === 100?"":opacity / 100;
}
};
function získejViditelnost(element) {
var shoda;
if("filters" in element) { // Internet Explorer
shoda = element.style.filter.match(/opacity=(\d*)/);
return shoda === null?100:Number(shoda[1]);
} else { // Ostatní prohlížeče
shoda = element.style.opacity ||
element.style.MozOpacity ||
element.style.KhtmlOpacity;
return shoda && shoda.length?Number(shoda) * 100:100;
}
};
function zobraz(element, čas, zpětnáVazba) {
var aktuálníViditelnost = získejViditelnost(element);
čas *= 1 - aktuálníViditelnost / 100;
var početFází = Math.floor(čas / snímkůZaSekundu),
aktuálníFáze = 0,
přírůstek = (100 - aktuálníViditelnost) / početFází,
interval = setInterval(function() {
if(aktuálníFáze === početFází) {
nastavViditelnost(element, 100);
clearInterval(interval);
if(zpětnáVazba instanceof Function)
zpětnáVazba();
} else {
nastavViditelnost(element, aktuálníViditelnost + přírůstek * aktuálníFáze);
aktuálníFáze++;
}
}, 1000 / snímkůZaSekundu);
return function() {
clearInterval(interval);
};
};
function skryj(element, čas, zpětnáVazba) {
var aktuálníViditelnost = získejViditelnost(element);
čas *= aktuálníViditelnost / 100;
var početFází = Math.floor(čas / snímkůZaSekundu),
aktuálníFáze = 0,
přírůstek = aktuálníViditelnost / početFází,
interval = setInterval(function() {
if(aktuálníFáze === početFází) {
nastavViditelnost(element, 0);
clearInterval(interval);
if(zpětnáVazba instanceof Function)
zpětnáVazba();
} else {
nastavViditelnost(element, aktuálníViditelnost - přírůstek * aktuálníFáze);
aktuálníFáze++;
}
}, 1000 / snímkůZaSekundu);
return function() {
clearInterval(interval);
};
};
</script>
</body>
</html>Živá ukázka Výhodou je přerušitelnost animace za chodu, navázání v bodě přerušení a odlehčenost řešení. Je možné ještě zjednodušit pro konkrétní použití, script je možné zkomprimovat a vložit do externího souboru. Funkce jsem pro názornost pojmenoval počesku, případné nepochopené části kódu můžu vysvětlit. :-) |
||
|
Časová prodleva: 13 let
|
|||
0