Prezentácia JavaScript s CSS

• Smieť 12, 2024

V predchádzajúcom článku sme vytvorili veľmi jednoduchú prezentáciu jazyka JavaScript. Táto prezentácia je úplne funkčná a dokonca zobrazuje niečo vhodné pre ľudí, ktorí nemajú JavaScript, ale nemá úplne všetky funkcie, ktoré by som chcel mať pre svoj web. Chcel by som najmä, aby sa miniatúra obrázka, ktorý práve zobrazujem, nejako odlišovala od ostatných miniatúr. Keďže štýly sú dobrým spôsobom, ako to dosiahnuť, začnem prevodom všetkých atribútov v mojom existujúcom HTML na CSS.

Najskôr som skonvertoval môj existujúci štýl na použitie CSS. Ak nepoznáte CSS, najjednoduchší spôsob, ako s ním začať experimentovať, je dať ho medzi seba štýl v hlavičke dokumentu HTML. Počiatočná značka potrebuje atribút typu, aby mohol prehliadaču povedať, aký typ informácií o štýle používate, takže by mal vyzerať takto:



Počiatočná konverzia na CSS bola jednoduchá, pretože iba veľký obrázok mal informácie o stylingu a už mal formát id atribút, ktorý sa používal na účely JavaScriptu.

#largeImage {
okraj: 2px čierna;
šírka: 544px;
výška: 408px;
}

Predtým som nezahrnul informácie o veľkosti pre miniatúry, ale pridal som triedu s názvom palca a nastaviť značky obrázkov v tejto triede, aby sa veľkosť nastavila na 40 x 40 pixlov. To znamená, že aj keď omylom načítam obrázky, ktoré sú príliš veľké alebo malé na miniatúry, budú sa nútené zobrazovať vo veľkosti miniatúry.

img.thumbs {
hranica: žiadna;
šírka: 40px;
výška: 40px;
}

Tiež som pridal a slideshow trieda na celú prezentáciu. To mi umožní robiť veci, ako je pridanie orámovania alebo zmena farby pozadia pre celú prezentáciu, ak si to želám. V tejto chvíli používam iba na nastavenie maximálnej výšky na výšku veľkého obrázka, pretože keď pridám viac miniatúr, chcem, aby zostali na strane veľkého obrázka namiesto toho, aby sa pohybovali nad ním. Program Internet Explorer bohužiaľ nepodporuje atribút maximálnej výšky, takže na tomto probléme budem musieť pracovať neskôr.

.slideshow {
výška: 408px;
maximálna výška: 408 px;
}

Nakoniec som vytvoril štýl pre vybranú miniatúru. Rozhodol som sa, že chcem, aby moja vybraná miniatúra bola polopriehľadná a mala úzke červené orámovanie. Pretože v tom čase bude vybratý iba jeden obrázok, rozhodol som sa na tento účel použiť ID s názvom „current“. Výhodou použitia CSS je to, že dokážem kedykoľvek zmeniť, ako bude vyzerať bez zmeny kódu. Štýl vyzerá takto:

img # prúd {
okraj: 1px plná červená;
Filter: alfa (opacity = 50);
-moz-opacity: 0,5;
nepriehľadnosť: 0,5;
}

Tu vidíme nejaký kód na opätovné zvládnutie rozdielov v prehliadači, štandardné výzvy na použitie prvku nepriehľadnosti, ale prehliadače založené na prehliadačoch IE a Mozilla to zatiaľ nepodporujú.

Nakoniec som zmenil HTML pre miniatúry, aby som používal štýly a volal moju funkciu. HTML pre moju prezentáciu teraz vyzerá takto:









Nezmenili sme náš JavaScript, takže prezentácia stále funguje, ale teraz máme viac štýlov a naša prezentácia je oddelená od našich HTML a JavaScript. Máme však jeden problém, zatiaľ čo pôvodne vybraná miniatúra je polopriehľadná s červeným okrajom, ale zostane tak aj pri zmene obrázkov. Aby sme to mohli vyriešiť, musíme sa vrátiť k nášmu starému priateľovi JavaScript.

Tu môžete vidieť funkčný príklad kódu.

Video Návody: Čo s programátorom, ktorý robí špagety? - Tomáš Stankovič | WEBtlak #5 (Smieť 2024).