Autor Zpráva
Verca
Profil *
Ahojky,
Mám tento script, který mi mění fotografie. Chtěla bych udělat nejaky efekt, alespon plynulou zmenu, nebo tak neco. Vim ze se to dela treba pres opacity(alpha), ale tak nejak to neumim zakomponovat do toho meho scriptiku.
Mohl by jste mi prosim Vas nekdo poradit.
Dekuji

<script language="JavaScript" type="text/javascript"> 
obr = -1; cas = 2000; function animation(){ 
obrazky = ["1.jpg","2.jpg","3.jpg", 
"4.jpg"]; 
if (obr+1==obrazky.length) obr=0; 
else obr++; obrazek.src = obrazky[obr]; 
window.setTimeout('animation()',cas); } 
</script>

<body onLoad="animation()"> 
  <img src="1.jpg" name="obrazek" WIDTH=320 HEIGHT=240 ALT="Fotogalerie (animace)">
</body>
Joan
Profil
Verca:
Ahoj, třeba Ti pomůže vlákno, kde jsem zrovna totéž nedávno řešila já.
Verca
Profil *
Tak to tak nějak zkouším propojit, ale moc tomu teda nerozumím. Zkusila jsem tyhle dva scripty vlozit do jednoho, ale ted uz se mi ty fotky ani neprolinaji.
<script language="JavaScript" type="text/javascript"> 
obr = -1; cas = 2000; function animation(){ 
obrazky = ["1.jpg","2.jpg","3.jpg", 
"4.jpg"]; 
if (obr+1==obrazky.length) obr=0; 
else obr++; obrazek.src = obrazky[obr]; 
window.setTimeout('animation()',cas); } 

function animation(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>
<body onLoad="animation()"> 
  <img src="1.jpg" name="obrazek" WIDTH=320 HEIGHT=240 ALT="Fotogalerie (animace)">
</body>
Darker
Profil
No nechce se mi moc zkoumat ty source výše uvedené, páč jsem lenoch ale obdobný problém se zmizením a objevením jsem řešil takto:
function apear(element,speed,value) {
 if(value+1!=1*(1+value)) {value=0}; //pokud parametr value není číslo nechť je to 0
 element.style.display="block"; //pokud je objekt neviditelný, zviditelní se
 element.style.opacity = value / 10;//objekt bude mít přesně desetinu průhlednosti zadané hodnoty (vysvětlím dole)
 element.style.filter = 'alpha(opacity=' + value * 10 + ')';//totéž pro IE
 if(value==0&&speed<0) {element.style.display="none";value=50}//pokud je rychlost záporná (objekt mizí) a už jsme u nuly, končíme
 if(value<=10) {setTimeout("windowapear(document.getElementById('"+element.id+"'),"+speed+","+(value+speed)+")",30)}//zavolat totéž znova, zadaná hodnota value, se zvýší o proměnnou speed
}

Hodnota value 10 odpovídá solidnímu neprůhlednému objektu (pro IE se vynásobí 10=>100; pro ostatní deseti vydělí.
Pokud budu chtít něco nechat objevit se:apear(objectObject objekt,intrychlost)
Třetí parametr můžem vynechat, protože se sám nastaví na nulu, kterou objevování začíná.
Pokud chci něco zmizet, dám rychlost zápornou a value deset.
Verca
Profil *
Dekuji za radu, ale porad mi to neni vuvec jasne. Jak bych mela tu tvoji funkci pouzit s temi svymi fotografiemi aby se mi tedy postupne prolinali?
Moderátor Chamurappi: Tvůj projev je špatně srozumitelný, piš prosím s diakritikou.
Witiko
Profil
Darker, Verca:
Oba posíláte funkci setTimeout řetězec místo funkce. Naprosto bezdůvodné, naprosto strašidelné.
Stejně tak oba nahazujete naprosto náhodné intervaly, aniž byste jakkoliv vycházeli z počtu snímků za sekundu. Verca má kód plný nedeklarovaných proměnných bez klíčového slova var, které způsobí, že se netvoří nesmazatelné proměnné, ale smazatelné atributy globálního objektu window (nemluvě o tom, že takto nelze tvořit proměnné privátní), stejně tak tvoříš novou instanci pole při každém volání funkce animation.

Pokud se rozhodneš použít Darkerovo řešení, bude to vypadat asi takhle:
to Darker: opravil jsem eval a interval na setIntervalu (aby se měnil rychlostí ~25 snímků za sekundu) a název funkce z apear (OT: správně je anglicky appear) na výstižnější fade, taky naprosto strašidelné testování, jde-li o číslo, stejně tak display se nemusí měnit při každém volání, přidal jsem tam callback funkci, která se po ukončení zavolá, a vůbec tam bylo spousta nelogických zápisů, které jsem přepsal. Pro potřeby scriptu vycházím z globální proměnné obrazek a z funkce jsem proto vyňal práci s atributem element. Klidně si ji tam zpětně přidej, to nebude těžké.
to Verca: Deklaroval jsem veškeré proměnné a tak trochu jsem to přeházel ke kráse a praktičnosti.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="Content-Language" content="cs">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    <title>Galerie</title>
    <script type="text/javascript"> 
    var obr = 0,
        cas = 2000,
        obrazky = ["1.jpg","2.jpg","3.jpg","4.jpg"],
        obrazek;
        
    function init(element) {
      obrazek = element;
      fade(0.1, 0, animation); // Necháme fotku zobrazit
    }
        
    function animation() { 
      if(obr+1 == obrazky.length) obr=0; 
      else obr++;
      window.setTimeout(function() { // Fotku po určený čas zobrazíme
        fade(-0.1, 1, function() { // Poté ji necháme zmizet
          obrazek.src = obrazky[obr]; // Přehodíme obrázek
          fade(0.1, 0, animation); // A nový obrázek zobrazíme, opakujeme do zblbnutí
        });
      },cas);
    }
    
    function fade(speed, value, callback) {
      if(typeof value != "number") value=0;
      if(obrazek.style.display == "none") obrazek.style.display = "block";
      obrazek.style.opacity = value;
      obrazek.style.filter = "alpha(opacity=" + (value * 100) + ")";
      if((value <= 0 && speed < 0) || (value >= 1 && speed > 0)) {
        if(value <= 0) obrazek.style.display="none";
        callback(); // končíme
      }
      else {
        window.setTimeout(function() {
          fade(speed, value+speed, callback);
        }, 1000/25);
      }
    }
  </script>
  </head>
  <body onload="init(document.getElementById('album'))">
    <div align="center">
      <img src="1.jpg" id="album" alt="Fotogalerie (animace)" style="width: 320px; height:240px; display: none;">
    </div>
  </body>
</html>


Ozkoušeno a funkční, případné stížnosti směřujte sem. Místo bezhlavého kopírování doporučuji kód se svým porovnat, abyste viděli, co jsem měnil.
Pro reálné použití bych doporučil provést ještě preloading obrázků, aby se nenačítaly až při změně fotky. (to lze snadno provést ve funkci init, než se fotka zobrazí)
Stejně tak naprosté zmizení elementu může mít na stránkách za následek chvilkový rozpad layoutu (těch 40 milisekund, co je obrázek skrytý, je vyjmutý s layoutu stránky). Pokud by to činilo problém, stačí umazat řádek if(value <= 0) element.style.display="none";, který toto skrytí obstarává.
K3D4R
Profil *
Dobrý den všem.
Nejsem si uplně jisty jestli svuj problem dokazu podat taky aby byl spravne pochopen le pokusim se o to Predem se omlouvam bude li to hloupost ale uz dlouho chvili googlim a podle tehle diskuze a hlavne erudovanych odpovedi bych rekl ze tady by se mohl najit nekdo kdo by pomohl.
Tedy k veci:Absolutne nevim co je JAVA znam jen JAWA protoze jsem zakladatel tohoto fora Odkaz Jinak ridic zachranar na rychle zachranne.Tolik k me neznalosti tematu. Potreboval jsem aby se nam na portale tocilo 5 reklamnich banneru Jsou to reklamy clenu (motorkaru) a videt jsou jen pro neregistrovane (neprihlasene).Kod nebo script pro jejich zobrazeni se vklada v administraci phpbb do okna (bloku) ze kterych se pak sklada cela uvodni strana.Script pro toceni obrazku uz tam mam a funguje ALE neodkazuje jen meni obrazky a ja bych potreboval aby obrazky zaroven byly i odkazem cili kazdy z obrazku aby odkazoval a po kliknuti na nej otevrel stranku na kterou odkazuje v novem okne.Rikam rovnou sam ho asi upravit nedokazu i kdyz se jiste pokusim ale byl bych komukoliv z mistnich borcu vdecny za pomoc.Kdyby byl prechod mezi obrazky navic plynnuly jak se zde popisuje bral bych to uz jen jako bonus.
Takto tam kod mam a funguje: "jen" neodkazuje

<script language="JavaScript" type="text/javascript">
obr = -1;
cas = 10000;
function animation(){
obrazky = ["portal/images/banners/400x60/banner_hana84.GIF","portal/images/banners/400x60/Helios3.jpg","portal/images/banners/400x60/MotoTechnikaBanner.jpg","portal/images/banners/400x60/tattoo.jpg","portal/images/banners/400x60/PPT-BANER-0.jpg"];
if (obr+1==obrazky.length) obr=0;
else obr++;
obrazek.src = obrazky[obr];
window.setTimeout('animation()',cas);
}
</script>
</head>
<body onLoad="animation()">
<img src="a.gif" name="obrazek">

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0