JavaScript prezentacija s CSS-om

• Svibanj 9, 2024

U prethodnom smo članku napravili vrlo jednostavan JavaScript prezentacijski prikaz. Ovaj je prezentacijski prikaz potpuno funkcionalan i čak prikazuje nešto prikladno za ljude koji nemaju JavaScript, ali nema baš sve značajke koje bih želio imati za svoju web stranicu. Konkretno, volio bih da sličica slike koju trenutno prikazuje nekako izgleda različito od ostalih sličica. Budući da su stilovi dobar način da se to postigne, počet ću pretvaranjem svih atributa u mom postojećem HTML-u u CSS.

Prvo sam pretvorio svoj postojeći styling u CSS. Ako niste upoznati s CSS-om, najlakši način za početak eksperimentiranja s njim je stavljanje između stil oznake u glavi HTML dokumenta. Početnoj oznaci potreban je atribut tipa da bi pretraživaču rekao kakvu vrstu stilova koristi, tako da bi trebao izgledati ovako:



Početna pretvorba u CSS bila je laka jer je samo velika slika imala podatke o stilovima i već je imala an iskaznica atribut koji se koristio u svrhe JavaScripta.

#largeImage {
obrub: 2px kruta crna;
širina: 544px;
visina: 408px;
}

Prije nisam uključivao podatke o veličini sličica, ali sam dodao klasu koja se zove palac i postavite slikovne oznake u toj klasi da biste veličinu postavili na 40 px za 40 px. To znači da čak i ako slučajno ubacim slike koje su prevelike ili male za sličice, oni će biti prisiljeni da prikazuju u veličini sličica.

{img.thumbs
granica: nema;
širina: 40px;
visina: 40px;
}

Dodao sam i a Slideshow klase za održavanje čitavog prezentacije. To će mi omogućiti da radim stvari poput dodavanja obruba ili promjene boje pozadine za cijeli prezentacijski prikaz ako to želim. U ovom trenutku ga samo koristim za postavljanje maksimalne visine u visinu velike slike, jer kad dodam više sličica, želim da ostanu na strani velike slike, umjesto da se kreću iznad nje. Nažalost, Internet Explorer ne podržava atribut maksimalne visine, tako da ću na ovom pitanju morati poraditi više kasnije.

{.slideshow
visina: 408px;
maksimalna visina: 408px;
}

Napokon sam kreirao stil za odabranu sličicu. Odlučio sam da želim da moja odabrana sličica bude poluprozirna i da ima usku crvenu obrub. Budući da će istovremeno biti odabrana samo jedna slika, u tu svrhu odlučio sam koristiti id zvan "trenutni". Prednost upotrebe CSS-a je u tome što mogu promijeniti način na koji će on izgledati u bilo kojem trenutku bez promjene koda. Stil izgleda ovako:

img # struja {
obrub: 1px čvrste crvene boje;
Filter: alfa (neprozirnost = 50);
-moz-opacity: 0.5;
neprozirnost: 0,5;
}

Ovdje vidimo neki kôd za ponovno rješavanje razlika u preglednicima, standardni pozivi za korištenje neprozirnog elementa, ali i IE i Mozilla bazirani preglednici to još ne podržavaju.

Na kraju sam promijenio HTML za umanjene sličice kako bih upotrijebio stilove i pozvao svoju funkciju. HTML za moj prezentacijski izgled sada izgleda ovako:









Nismo promijenili JavaScript, tako da prezentacija i dalje funkcionira, ali sada imamo više stilova i naša prezentacija je odvojena od našeg HTML-a i JavaScript-a. Međutim, imamo jedan problem, iako je prvotno odabrana sličica poluprozirna s crvenim obrubom, ona ostaje na taj način kad mijenjamo slike. Da bismo to riješili, moramo se vratiti svom starom JavaScriptu JavaScript-a.

Dosadašnji primjer koda možete vidjeti ovdje.

Upute Video: Unity game engine u RIA svijetu - Danko Kozar, Ivan Mandić (Svibanj 2024).