Prezentace JavaScript s CSS

• Smět 17, 2024

V předchozím článku jsme vytvořili velmi jednoduchou prezentaci jazyka JavaScript. Tato prezentace je zcela funkční a dokonce zobrazuje něco vhodného pro lidi, kteří nemají JavaScript, ale nemá úplně všechny funkce, které bych chtěl mít pro svůj web. Zejména bych rád nechal miniaturu obrázku, který právě zobrazuji, nějak vypadat jinak než ostatní miniatury. Protože styly jsou dobrým způsobem, jak toho dosáhnout, začnu převáděním všech atributů v mém existujícím HTML na CSS.

Nejprve jsem převedl svůj stávající styl na použití CSS. Pokud nejste obeznámeni s CSS, nejsnadnějším způsobem, jak s ním začít experimentovat, je to mezi tím styl značky v hlavě vašeho dokumentu HTML. Počáteční značka potřebuje atribut type, aby prohlížeči řekla, jaký typ informací o stylu používáte, takže by měl vypadat takto:



Počáteční převod na CSS byl snadný, protože pouze velký obrázek měl informace o stylingu a již měl id atribut, který byl použit pro účely JavaScriptu.

#largeImage {
rámeček: 2px plná černá;
šířka: 544px;
výška: 408px;
}

Dříve jsem do miniatur nezahrnul informace o velikosti, ale přidal jsem třídu s názvem Palce a nastavit značky obrázků v této třídě, aby se velikost nastavila na 40 x 40 pixelů. To znamená, že i když omylem načtím obrázky, které jsou pro miniatury příliš velké nebo malé, budou nuceny je zobrazit ve velikosti miniatur.

img.thumbs {
hranice: žádný;
šířka: 40px;
výška: 40px;
}

Také jsem přidal a prezentace třída pro celou prezentaci. To mi umožní dělat věci, jako je přidání ohraničení nebo změna barvy pozadí pro celou prezentaci, pokud si to přeji. V tuto chvíli používám pouze k nastavení maximální výšky na výšku velkého obrázku, protože když přidám další miniatury, chci, aby zůstali na straně velkého obrázku místo aby se pohybovali nad ním. Internet Explorer bohužel nepodporuje atribut max-height, takže v tomto problému budu muset pracovat později.

.slideshow {
výška: 408px;
max-výška: 408px;
}

Nakonec jsem vytvořil styl pro vybranou miniaturu. Rozhodl jsem se, že chci, aby moje vybraná miniatura byla poloprůhledná a měla úzkou červenou hranici. Protože bude vybrán pouze jeden obrázek, rozhodl jsem se pro tento účel použít ID zvané „aktuální“. Výhodou používání CSS je to, že mohu změnit, jak bude vypadat kdykoli, aniž bych změnil kód. Styl vypadá takto:

img # current {
okraj: 1px plná červená;
filtr: alfa (opacity = 50);
-moz-opacity: 0,5;
krytí: 0,5;
}

Zde vidíme nějaký kód pro opětovné řešení rozdílů v prohlížeči, standardní volání pro použití prvku neprůhlednosti, ale prohlížeče založené na IE i Mozille to zatím nepodporují.

Nakonec jsem změnil HTML pro miniatury, abych použil styly a zavolal svou funkci. HTML pro moji prezentaci nyní vypadá takto:









Nezměnili jsme náš JavaScript, takže prezentace stále funguje, ale nyní máme více stylů a naše prezentace je oddělena od našich HTML a JavaScript. Máme však jeden problém, zatímco původně vybraná miniatura je poloprůhledná s červeným rámečkem, zůstává tak při změně obrázků. Chcete-li to vyřešit, musíme se vrátit zpět k našemu starému příteli JavaScript.

Zde můžete vidět funkční příklad kódu.

Video Návody: Úvod do NodeJS (Smět 2024).