Diaprojekcija JavaScript s funkcijami

• Maj 20, 2024

V prejšnjih člankih smo ustvarili in naredili natančno nastavitev na zelo preprosti diaprojekciji JavaScript. Ta diaprojekcija je popolnoma funkcionalna in prikazuje celo nekaj primernega za ljudi, ki nimajo JavaScript, vendar bi rad, da se sličica slike, ki jo trenutno prikažem, zdi drugačna od drugih sličic. Odločil sem se za uporabo CSS-ja, imenovanega "trenutni", ki je naredil slike napol pregledne in dodal tanko rdečo obrobo izbrani sličici. V svojem zadnjem članku sem to vedenje dobil za prvotno izbrano sličico, ko pa sem izbral novo sličico, se nova sličica ni spremenila in začetna sličica je ohranila izbrani slog.

V prejšnji različici moje diaprojekcije, ko uporabnik klikne na sličico, se prikažejo povezane velike slike. Želim, da spremenim veliko sliko, nastavim sličico prej izbrane slike, da se vrne v normalno stanje in ta sličico prikaže s posebnim slogom za izbrano sliko. Ker zdaj s klikom na sličico počnem več stvari, sem preusmeril vso svojo kodo v atribut onClick v img označite za uporabo funkcije. Funkcije JavaScript običajno gredo v glava odsek HTML-ja, tako da bodo naloženi in pripravljeni, ko bo naloženo telo strani. Lahko jih vstavite neposredno med skripta oznake ali put in datoteka in priložena. Pri kratkih programih ali kadar aktivno šifriram, lažje postavim kodo neposredno na stran, kot sem jo naredil tukaj.

Lahko bi uporabil funkcijo za vsako sličico, toda ker je vse, kar se spreminja iz sličice v sličico, ime slike in ID sličice (in za ime sem uporabil ime slike), sem napisal eno funkcijo, ki je id kot argument in ga uporabil za ustvarjanje ustreznega imena slike z dodajanjem ".jpg". Poklical sem svojo funkcijo displayLarge.

funkcija displayLarge (id) {
// spremenite veliko sliko
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// vrne slog prejšnje sličice na privzeto
document.getElementById ("trenutno"). id = oldID;
// zapišite id, preden ga spremenimo
oldID = id
// sličico označite kot trenutno s trenutnim slogom
document.getElementById (id) .id = "trenutno";
}

Da bi ta funkcija prvič delovala, sem moral dati tudi začetno definicijo za oldID, spremenljivko, s katero se spomnim izvirnega id-a sličice, ki je trenutno izbrana. Vsa ta koda se nahaja v glavnem delu spletne strani, tako da se naloži pred nalaganjem strani.

Končno sem spremenil HTML za sličice, da sem poklical svojo funkcijo. HTML mojega diaprojekcije zdaj izgleda tako:











Delovni primer te kode si lahko ogledate tukaj.

Navodila Video: Web Scraping with Nokogirl/Kimono by Robert Krabek (Maj 2024).