JavaScript-diaesitys CSS: n avulla

• Saattaa 13, 2024

Edellisessä artikkelissa loimme hyvin yksinkertaisen JavaScript-diaesityksen. Tämä diaesitys on täysin toimiva ja näyttää jopa jotain sopivaa ihmisille, joilla ei ole JavaScriptiä, mutta siinä ei ole aivan kaikkia ominaisuuksia, joita haluaisin verkkosivustolleni. Erityisesti haluaisin, että näytölläni olevan kuvan pikkukuva näyttää jotenkin erilaiselta kuin muut pienoiskuvat. Koska tyylit ovat hyvä tapa saavuttaa tämä, aloitan muuntamalla kaikki olemassa olevan HTML-koodini attribuutit CSS: ksi.

Ensin muutin nykyisen tyylini käyttämään CSS: ää. Jos et ole perehtynyt CSS: ään, helpoin tapa aloittaa kokeilu sen kanssa on laittaa se väliin tyyli tunnisteet HTML-asiakirjan päässä. Alkuperäinen tunniste tarvitsee tyyppimääritteen kertomaan selaimelle, minkä tyylisiä tietoja käytät, joten sen pitäisi näyttää tältä:



Alkuperäinen muuntaminen CSS: ksi oli helppoa, koska vain suurella kuvalla oli muotoilutietoja ja sillä oli jo id attribuutti, jota käytettiin JavaScript-tarkoituksiin.

#largeImage {
reunus: 2px kiinteä musta;
leveys: 544px;
korkeus: 408px;
}

En ollut aiemmin sisällyttänyt pienoiskuvien koon tietoja, mutta lisäsin luokan nimeltä peukalot ja aseta kuvan tunnisteet luokkaan asettaaksesi 40xx40xx. Tämä tarkoittaa, että vaikka lataan vahingossa kuvia, jotka ovat liian suuria tai pieniä pikkukuvia varten, ne pakotetaan näyttämään pikkukuvina.

img.thumbs {
raja: ei mitään;
leveys: 40px;
korkeus: 40px;
}

Lisäsin myös diaesitys luokka koko diaesityksen pitämiseksi. Tämän avulla voin tehdä asioita, kuten lisätä reunuksen tai muuttaa koko diaesityksen taustaväriä, jos haluan. Tässä vaiheessa käytän sitä vain asettaaksesi maksimikorkeuden suuren kuvan korkeudelle, koska lisättäessä miniatyyrejä haluan niiden pysyvän suuren kuvan sivulla sen sijaan, että siirryisin sen yläpuolelle. Valitettavasti Internet Explorer ei tue maksimikorkeusominaisuutta, joten minun on jatkettava tämän asian käsittelyä myöhemmin.

.slideshow {
korkeus: 408px;
max-korkeus: 408px;
}

Lopuksi loin tyylin valitulle pikkukuvalle. Päätin, että haluan valitun pikkukuvani olevan puoliläpinäkyvä ja kapealla punaisella reunalla. Koska vain yksi kuva valitaan kerrallaan, päätin käyttää tähän tarkoitukseen nimitystä "nykyinen". CSS: n käytön etuna on, että voin muuttaa sen ulkonäköä milloin tahansa muuttamatta koodia. Tyyli näyttää tältä:

img # nykyinen {
reunus: 1px kiinteä punainen;
suodatin: alfa (opasiteetti = 50);
-moz-opasiteetti: 0,5;
opasiteetti: 0,5;
}

Täällä näemme koodin selainerojen käsittelemiseksi uudelleen, standardi vaatii opasiteetti-elementin käyttöä, mutta sekä IE että Mozilla-pohjaiset selaimet eivät tue sitä vielä.

Lopuksi muutin pikkukuvien HTML-koodin tyylien käyttämiseksi ja funktion kutsumiseksi. Diaesityksen HTML-koodi näyttää nyt seuraavalta:









Emme ole muuttaneet JavaScriptiämme, joten diaesitys toimii edelleen, mutta nyt meillä on enemmän muotoilua ja esityksesi on erotettu HTML: stä ja JavaScriptista. Meillä on kuitenkin yksi ongelma, vaikka alun perin valittu pikkukuva on puoliläpinäkyvä ja punaisella reunuksella, se pysyy sellaisena, kun muutamme kuvia. Korjataksesi tämän, meidän on käännyttävä takaisin vanhan ystävämme JavaScriptiin.

Täällä voit nähdä toimivan esimerkin koodista.

Video-Ohjeita: How to use marquee tag in HTML(scrolling images and text in web page ) (Saattaa 2024).