du kan bruge Google til at give dine besøgende mulighed for at ændre størrelsen på din hjemmesides skrifttype. Dette er en nyttig grænseflade at have, da dine besøgende kan forstørre eller reducere skrifttypens størrelse på deres fritid, hvilket giver dem den bedste læseoplevelse. Hvis du ikke er bekendt med JKR, tjek vores grundlæggende artikel for en forklaring på, hvordan JKR fungerer.
dette er en interaktiv kode display, der viser dig HTML, CSS, jforespørgsel, og en demo af output.
opsætning af HTML til ændring af størrelse
den første ting, du skal gøre, er at konfigurere din HTML, så forespørgslen kan bestemme, hvad du skal ændre størrelsen på. Hvis du ikke er bekendt med at udstyre dit HTML-dokument til reference jforespørgsel, se vores få din HTML klar til jforespørgsel artikel.
først skal du tilføje en størrelsesgrænseflade. Bare rolig, det lyder mere kompliceret, end det faktisk er. Dette er bare noget, som dine hjemmesidebrugere kan interagere med for at ændre størrelsen på din hjemmesides skrifttype. Som du kan se i eksemplet ovenfor, brugte vi links, der var repræsenteret som plus, minus og ordet “Nulstil.”
<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>
hvert link skal have en klasse, der repræsenterer handlingen, som “Forøg” eller “formindsk.”Når vi tilføjer forespørgslen, vil vi bruge disse klasser til at angive, hvilket link der skal øge, formindske eller nulstille skriftstørrelsen.
vurder nu, hvilke elementer eller sektioner du vil ændre størrelse. Hvis det er en sektion, kan du oprette en <div> med en klasse, så du kan angive et unikt område, der skal ændres.
se Pennespørgen: ændring af størrelse på Hjemmeside Font klasse eksempel ved Par netværk (@pairdocs) på CodePen.
i eksemplet ovenfor kan du se, at < div> med klassen=”størrelse kan ændres” er markeret for at blive ændret. Resten af dine afsnit påvirkes dog ikke, medmindre du angiver, at alle <p> elementer også skal ændres.
jforespørgsel til ændring af størrelse
jforespørgsel håndterer den tunge løft af ændring af størrelse. Hvis du ikke er bekendt med jfor, tjek vores grundlæggende artikel for at få en forståelse af de fælles begreber.
det første trin er at oprette en $(dokument).klar funktion, der vil indkapsle alle dine spørgsmål udsagn.
$(document).ready(function(){//jQuery statements//jQuery statements});
næste, vi vil tilføje den første jforgery erklæring til at gå inden for denne funktion.
var resize = new Array('element','.class'); resize = resize.join(',');
denne erklæring fastlægger, hvilke elementer eller klasser der skal inkluderes i størrelsen. Disse elementer / klasser gemmes i variablen ” ændre størrelse.”Hvis du ser på eksemplet med ændring af størrelse på skrifttype, vil du se, at elementet <p> og klassen “størrelse kan ændres” blev valgt til ændring af størrelse.
når du har fastlagt, hvilke elementer eller klasser der vil blive påvirket, skal du konfigurere koden for faktisk at ændre skriftstørrelsen, når en besøgende interagerer med din størrelsesgrænseflade.
Nulstil skriftstørrelsen
under vores “var-Størrelse” – erklæring vil vi tilføje en erklæring, der nulstiller skrifttypen til dens oprindelige størrelse.
var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });
denne erklæring kalder de elementer eller klasser, du har gemt i variablen “Ændr størrelse”, og når linket til klassen “Nulstil” klikkes, vender attributten skriftstørrelse i CSS tilbage til sin oprindelige størrelse.
$(“.nulstille”).klik (funktion () kalder klassen “Nulstil” fra HTML. Dette gør det muligt for j-forespørgslen at nulstille skriftstørrelsen, når brugeren interagerer med teksten, der er knyttet til klassen “Nulstil”. I vores eksempel er denne tekst simpelthen linket” Nulstil”.
Forøg skriftstørrelsen
Dernæst skal vi tilføje en erklæring, der øger skriftstørrelsen. I vores eksempel tilføjede vi klassen “Forøg” til linket”+”, så vi er nødt til at binde forespørgselshandlingen for at øge størrelsen til”+”.
dette eksempel gør netop det.
//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });
eksemplet starter med at fastslå, at denne erklæring er afhængig af, at en bruger klikker på teksten, der er knyttet til klassen “Forøg”. Dette er et ” + ” i vores eksempel. De næste tre linjer tilføjer nye variabler: originalfontstørrelse, originalfontnummer og nyfontstørrelse.
originalfontstørrelse samler den aktuelle skriftstørrelse fra CSS og gemmer den. originaFontNumber analyserer dette nummer, så jfr kan læse det. Derefter tager den nye størrelse det nummer, der er gemt i originalFontNumber, og multiplicerer det med 1,2.
derefter går den sidste linje ind i CSS og ændrer skriftstørrelsen for at matche nykontstørrelse.
denne sekvens udføres hver gang der klikkes på”+”.
Formindsk skriftstørrelsen
formindskelsen er meget lig den tidligere sætning. I stedet for at multiplicere skriftstørrelsen med et tal, der øger det originale skrifttypenummer, multiplicerer sætningen fald det originale skrifttypenummer med en decimal, hvilket reducerer det.
//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});
denne sekvens udføres hver gang der klikkes på” -“. Dette reducerer skriftstørrelsen med hvert klik.
