„JavaScript“ skaidrių demonstracija naudojant CSS

• Gegužė 17, 2024

Ankstesniame straipsnyje mes sukūrėme labai paprastą „JavaScript“ skaidrių demonstraciją. Ši skaidrių demonstracija yra visiškai funkcionali ir joje netgi yra kažkas tinkamo žmonėms, kurie neturi „JavaScript“, tačiau jame nėra visų funkcijų, kurias norėčiau turėti savo svetainėje. Visų pirma norėčiau, kad mano dabar rodomo paveikslėlio miniatiūra atrodytų kitaip nei kitos miniatiūros. Kadangi stiliai yra geras būdas tai pasiekti, pradėsiu konvertuodamas visus turimo HTML atributus į CSS.

Pirmiausia pakeičiau turimą stilių į CSS. Jei nesate susipažinę su CSS, paprasčiausias būdas pradėti eksperimentuoti su ja stiliaus žymės jūsų HTML dokumento galvoje. Pradinei žymai reikia tipo atributo, kad naršyklė galėtų pasakyti, kokį stiliaus informaciją naudojate, todėl ji turėtų atrodyti taip:



Pradinis konvertavimas į CSS buvo lengvas, nes tik dideliame atvaizde buvo informacija apie stilių, o jis jau turėjo ID atributas, kuris buvo naudojamas „JavaScript“ tikslams.

#largeImage {
kraštinė: 2 taškų kietas juodas;
plotis: 544px;
aukštis: 408px;
}

Anksčiau nebuvau įtraukęs miniatiūrų dydžio informacijos, tačiau pridėjau pavadintą klasę nykščiai ir nustatykite toje klasėje vaizdo žymas, kad dydis būtų nuo 40 x 40 pikselių. Tai reiškia, kad net jei netyčia įkelsiu vaizdus, ​​kurie yra per dideli ar maži miniatiūroms, jie bus priversti rodyti miniatiūrų dydį.

img.thumbs {
kraštas: nėra;
plotis: 40 pikselių;
aukštis: 40 taškų;
}

Aš taip pat pridėjau a skaidrių demonstracija klasė, kad būtų galima surengti visą skaidrių demonstraciją. Tai leis man padaryti tokius veiksmus, kaip pridėti rėmelį arba pakeisti visos skaidrių demonstracijos fono spalvą, jei to noriu. Šiuo metu naudoju jį tik didžiausiam atvaizdo aukščiui nustatyti, nes pridedant daugiau miniatiūrų noriu, kad jos liktų didžiojo atvaizdo šone, o ne judėtų virš jo. Deja, „Internet Explorer“ nepalaiko atributo „max-height“, todėl vėliau vis tiek turėsiu išspręsti šią problemą.

.slidžių demonstracija {
aukštis: 408px;
maksimalus aukštis: 408 taškai;
}

Galiausiai sukūriau pasirinktos miniatiūros stilių. Nusprendžiau, kad mano pasirinkta miniatiūra yra pusiau skaidri ir su siauru raudonu kraštu. Kadangi vienu metu bus pasirinktas tik vienas vaizdas, nusprendžiau šiam tikslui naudoti ID, vadinamą „current“. CSS naudojimo pranašumas yra tas, kad galiu bet kada pakeisti tai, kaip ji atrodys, nekeisdama kodo. Stilius atrodo taip:

img # current {
kraštinė: 1xx vientisai raudona;
filtras: alfa (nepermatomumas = 50);
-moz-nepermatomumas: 0,5;
neskaidrumas: 0,5;
}

Čia matome kodą, skirtą dar kartą sutvarkyti naršyklių skirtumus, standartas reikalauja naudoti neskaidrumo elementą, tačiau tiek IE, tiek „Mozilla“ pagrįstos naršyklės to dar nepalaiko.

Galiausiai pakeičiau miniatiūrų HTML, kad būtų galima naudoti stilius ir paskambinti į mano funkciją. Dabar mano skaidrių demonstravimo HTML atrodo taip:









Mes nepakeitėme „JavaScript“, todėl skaidrių demonstracija vis dar veikia, tačiau dabar mes turime daugiau stiliaus ir mūsų pristatymas yra atskirtas nuo HTML ir „JavaScript“. Tačiau turime vieną problemą, nors iš pradžių pasirinkta miniatiūra yra pusiau permatoma su raudonu kraštu, ji taip ir lieka, kai keičiame vaizdus. Norėdami tai išspręsti, turime kreiptis į seną draugą „JavaScript“.

Iki šiol veikiantį kodo pavyzdį galite pamatyti čia.

Vaizdo Instrukcijos: Web Programming - Computer Science for Business Leaders 2016 (Gegužė 2024).