|
Web razvoj Sve u vezi sa razvojem Internet sajtova: programi, dizajn, usluge hostinga, administracija... |
|
Alatke vezane za temu | Vrste prikaza |
24.6.2012, 14:57 | #1 |
Starosedelac
Član od: 23.2.2006.
Lokacija: Tamo gde su kuće od čokolade i prozori od marmelade....
Poruke: 1.579
Zahvalnice: 195
Zahvaljeno 301 puta na 171 poruka
|
Galerija JavaScript
Radim seminarski za fax i sad to treba da bude sajt sa nekim silnim čudima, doduše to je nebitno.
I sad hoću da napravim galeriju od 5,6 slika i da ubacim. Pisao sam skriptu koja radi "slajd" levo desno tako što povećava ili smanjuje širinu elementa (u ovom slučaju diva) Pa sam kasnije to preradio i ubacio u moju galeriju. Iz nekog razloga meni te funkcije neće da rade na divovima u toj galeriji. Kod skripte "levo/desno" Kod:
<html xmlns='http://www.w3.org/1999/xhtml'> <head> <meta http-equiv='Content-Type' content='text/html; charset=utf-8' /> <title>Untitled Document</title> <style type='text/css' > #kontejner{ width: 50%; margin: auto; } #plavi{ width: 200px; height: 200px; background-color: blue; position: absolute; top: 10px; left: 10px; z-index: 1; } #crveni{ width: 200px; height: 200px; background-color: red; position: absolute; top: 10px; left: 10px; z-index: 2; } </style> <script type='text/javascript'> var i; function zatvori_int(){ i = clearInterval(i); } function pomeri_levo(){ var sirina =parseInt(document.getElementById('crveni').style.width); sirina = sirina - 2; document.getElementById('crveni').style.width = sirina; if(sirina == 0) zatvori_int(); } function pomeri_desno(){ var sirina = parseInt(document.getElementById('crveni').style.width); sirina = sirina + 2; document.getElementById('crveni').style.width = sirina; if(sirina == 200) zatvori_int(); } function dugme_levo(){ if(parseInt( document.getElementById('crveni').style.width) == 0) return; else i = setInterval('pomeri_levo()',10); } function dugme_desno(){ if(parseInt(document.getElementById('crveni').style.width) == 200) return; else i = setInterval('pomeri_desno()',10); } </script> </head> <body> <div id='kontejner' > <input type='button' id='levo' value='Levo' onclick='dugme_levo()'/> <input type='button' id='desno' value='Desno' onclick='dugme_desno()' /> <br /> <br /> <div id='crveni' style="width: 200px;"> </div> <div id='plavi' style="width: 200px;"> </div> </div> </body> </html> Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link rel="stylesheet" type="text/css" href="style_slide.css"/> <script type='text/javascript'> var i; function zatvori_int(){ //Funkcija za zaustavljanje intervala i = clearInterval(i); } function pomeri_levo(elem){ // funkcija koja smanjuje sirinu diva do 0 (stvara privid kao da se "pomera" ulevo) //argument je string koji reprezentuje ime elementa sa kojim treba da radi. var temp = String(elem); //window.alert(temp); var sirina = parseInt(document.getElementById(temp).style.width); sirina = sirina - 2; //window.alert("entry level"); document.getElementById(temp).style.width = sirina; if(sirina == 0) zatvori_int(); } function pomeri_desno(elem){ // funkcija koja povecava sirinu diva do 440 (stvara privid kao da se "pomera" udesno) //argument je string koji reprezentuje ime elementa sa kojim treba da radi. var sirina = parseInt(document.getElementById(elem).style.width); sirina = sirina + 2; document.getElementById(elem).style.width = sirina; if(sirina == 440) zatvori_int(); } function sledeci(elem){ // funkcija koja poziva setInterval sa gore pomenutim funkcijama //takodje sadrzi string argument sa imenom elementa if(parseInt( document.getElementById(elem).style.width) == 0) return; else i = setInterval('pomeri_levo(elem)',10); } function prethodni(elem){ // funkcija koja poziva setInterval sa gore pomenutim funkcijama // takodje sadrzi string argument sa imenom elementa if(parseInt(document.getElementById(elem).style.width) == 440) return; else i = setInterval('pomeri_desno(elem)',10); } var tek_el = 1; function div_sl(){ //funkcija koja predstavlja kontrolu sledeci, poziva gornje funkcije i generise elem koji predstavlja element sa kojim se radi if( tek_el < 6 ){ var elem = "slika"+tek_el; //window.alert(elem); sledeci(elem); tek_el = tek_el + 1; } else window.alert(" NEMA! "); } function div_pr(){ //funkcija koja predstavlja kontrolu prethodni, poziva gornje funkcije i generise elem koji predstavlja element sa kojim se radi if(tek_el > 1){ var elem = "slika"+tek_el; prethodni(elem); tek_el = tek_el - 1; } else window.alert("nema"); } </script> </head> <body> <div id="kontejner"> <div id="sl_div" class="kontrole" onclick="div_sl()"> <img src="ss_sl.png" alt="nesto" /> </div> <div id="slika1" style="width: 440px;" > <img src="slika1.jpg" alt="s1" /> </div> <div id="slika2" style="width: 440px;" > <img src="slika2.jpg" alt="s2" /> </div> <div id="slika3" style="width: 440px;" > <img src="slika3.jpg" alt="s3" /> </div> <div id="slika4" style="width: 440px;" > <img src="slika4.jpg" alt="s4" /> </div> <div id="slika5" style="width: 440px;" > <img src="slika5.jpg" alt="s5" /> </div> <div id="slika6" style="width: 440px;" > <img src="slika6.jpg" alt="s6" /> </div> <div id="pr_div" class="kontrole" spry:hover="preko" onclick="div_pr()"> <img src="ss_pr.png" alt="nesto2" /> </div> </div> </body> </html> Skripta: http://min.us/mQjolJJwA Hvala unapred |
Bookmarks sajtovi |
|
|
Slične teme | ||||
tema | temu započeo | forum | Odgovora | Poslednja poruka |
Početnički 3D radovi - galerija (WIP, tutorijali) | kinteC | 3D radovi | 2054 | 22.10.2021 19:14 |
JavaScript. da/ne | Game fever | Klijentske aplikacije | 1 | 10.10.2011 0:06 |
Flashplayer i Javascript, pomoć! | Lazar95 | Aplikativni softver | 5 | 13.1.2009 1:19 |
JavaScript: Kako uzeti sadržaj nekog taga? | urke | Klijentske aplikacije | 8 | 19.8.2008 13:33 |
javascript - pomoc | nika100 | Programiranje | 2 | 17.2.2007 16:25 |