Diaprojekcija JavaScript s CSS

• April 30, 2024

V prejšnjem članku smo ustvarili zelo preprosto diaprojekcijo JavaScript. Ta diaprojekcija je popolnoma funkcionalna in celo prikazuje nekaj primernega za ljudi, ki nimajo JavaScript, vendar nima prav vseh funkcij, ki bi jih rad imel za svoje spletno mesto. Zlasti bi rad, da bi sličica slike, ki jo trenutno prikazuje, nekako videti drugače kot druge sličice. Ker so slogi dober način za dosego tega, bom začel s pretvorbo vseh atributov iz mojega obstoječega HTML-ja v CSS.

Najprej sem svoj obstoječi slog pretvoril v CSS. Če CSS ne poznate, je najlažji način, da začnete z njim eksperimentirati, tako da ga postavite med slog oznake v glavi dokumenta HTML. Začetna oznaka potrebuje atribut tipa, da brskalniku sporoči, katere vrste podatkov o slogu uporabljate, tako da mora izgledati tako:



Začetna pretvorba v CSS je bila enostavna, saj je le velika slika imela podatke o stilu in je že imela id atribut, ki se je uporabljal za namene JavaScript.

#largeImage {
obroba: 2px trda črna;
širina: 544px;
višina: 408px;
}

Prej nisem vključil podatkov o velikosti sličic, vendar sem dodal razred, imenovan palce in nastavite slikovne oznake v tem razredu, da nastavite velikost 40px za 40px. To pomeni, da tudi če slučajno naložim slike, ki so prevelike ali majhne za sličice, bodo prisiljene prikazati v sličici.

img.thumbs {
meja: nobena;
širina: 40px;
višina: 40px;
}

Dodala sem tudi a diaprojekcija razreda za celotno diaprojekcijo. To mi bo omogočilo, če želim, da dodam obrobje ali spremenim barvo ozadja za celotno diaprojekcijo. Na tej točki ga uporabljam samo za nastavitev največje višine na višino velike slike, ker ko dodam več sličic, želim, da ostanejo ob strani velike slike, namesto da se premikajo nad njo. Internet Explorer žal ne podpira atributa max-height, zato bom moral to vprašanje še naprej obdelati pozneje.

.slideshow {
višina: 408px;
največja višina: 408px;
}

Končno sem ustvaril slog za izbrano sličico. Odločil sem se, da želim, da je moja izbrana sličica polprosojna in ima ozko rdečo obrobo. Ker bo hkrati izbrana samo ena slika, sem se odločil, da bom v ta namen uporabil id, imenovan "trenutni". Prednost uporabe CSS je, da lahko kadar koli spremenim, kako bo izgledal, ne da bi spremenil kodo. Slog izgleda tako:

img # current {
obroba: 1px trdno rdeča;
filter: alfa (motnost = 50);
-moz-motnost: 0,5;
motnost: 0,5;
}

Tu vidimo nekaj kode za ponovno obravnavo razlik v brskalniku, standardni klici za uporabo neprozornega elementa, vendar tako brskalniki, ki temeljijo na IE in Mozilla, tega še ne podpirajo.

Končno sem spremenil HTML za sličice, da sem uporabil sloge in poklical svojo funkcijo. HTML mojega diaprojekcije zdaj izgleda tako:









Nismo spremenili svojega JavaScript, zato diaprojekcija še vedno deluje, zdaj pa imamo več stilov in naša predstavitev je ločena od HTML-ja in JavaScript-a. Vendar imamo eno težavo, medtem ko je prvotno izbrana sličica napol prosojna z rdečo obrobo, tako ostane pri menjavi slik. Da bi to odpravili, se moramo vrniti na starega prijatelja JavaScript.

Tukaj si lahko ogledate delovni primer kode.