Jak używać jQuery, aby umożliwić odwiedzającym zmianę rozmiaru czcionki witryny

możesz użyć jQuery, aby dać odwiedzającym witrynę możliwość zmiany rozmiaru czcionki witryny. Jest to przydatny interfejs, ponieważ odwiedzający mogą powiększyć lub zmniejszyć rozmiar czcionki w wolnym czasie, zapewniając im najlepsze wrażenia z czytania. Jeśli nie jesteś zaznajomiony z jQuery, sprawdź nasz jQuery podstawy artykuł dla wyjaśnienia, jak jQuery działa.

jest to interaktywny wyświetlacz kodu, który pokazuje HTML, CSS, jQuery i demo wyjścia.

Konfigurowanie HTML do zmiany rozmiaru

pierwszą rzeczą, którą musisz zrobić, to skonfigurować HTML, aby jQuery mógł określić, co zmienić rozmiar. Jeśli nie jesteś zaznajomiony z wyposażeniem dokumentu HTML, aby odwoływać się do jQuery, zobacz nasze przygotowanie HTML do artykułu jQuery.

najpierw musisz dodać interfejs zmiany rozmiaru. Nie martw się, to brzmi bardziej skomplikowanie niż jest w rzeczywistości. Jest to po prostu coś, z czym użytkownicy Witryny mogą wchodzić w interakcje, aby zmienić rozmiar czcionki strony internetowej. Jak widać w powyższym przykładzie, użyliśmy linków, które były reprezentowane jako plus, minus i słowo ” reset.”

<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>

każdy link powinien mieć klasę reprezentującą akcję, taką jak” zwiększ „lub” zmniejsz.”Kiedy dodajemy jQuery, będziemy używać tych klas, aby wskazać, który link powinien zwiększyć, zmniejszyć lub zresetować rozmiar czcionki.

teraz Oceń, jakie elementy lub sekcje chcesz zmienić. Jeśli jest to sekcja, możesz utworzyć < div> z klasą, dzięki czemu możesz określić unikalny obszar, który ma zostać zmieniony.

zobacz przykład klasy czcionki Pen jQuery: Zmiana rozmiaru strony internetowej za pomocą sieci par (@pairdocs) na CodePen.

w powyższym przykładzie widać, że < div> z class=”resizable” jest oznaczony jako zmiana rozmiaru. Jednak reszta akapitów pozostanie niezmieniona, chyba że określisz, że wszystkie elementy <p> również powinny zostać zmienione.

jQuery do zmiany rozmiaru

jQuery obsługuje ciężkie podnoszenie zmiany rozmiaru. Jeśli nie jesteś zaznajomiony z jQuery, sprawdź nasz artykuł podstawy jQuery, aby zapoznać się z typowymi pojęciami.

pierwszym krokiem jest utworzenie $(dokumentu).ready funkcja, która będzie obejmować wszystkie twoje instrukcje jQuery.

$(document).ready(function(){//jQuery statements//jQuery statements});

następnie dodamy pierwszą instrukcję jQuery, która przejdzie do tej funkcji.

var resize = new Array('element','.class'); resize = resize.join(',');

to polecenie określa, które elementy lub klasy powinny zostać uwzględnione w zmianie rozmiaru. Te elementy / klasy są zapisywane w zmiennej ” resize.”Jeśli spojrzysz na przykład zmiany rozmiaru czcionki, zobaczysz, że element <P> i klasa „resizable” zostały wybrane do zmiany rozmiaru.

po ustaleniu, które elementy lub klasy będą miały wpływ, musisz skonfigurować kod, aby faktycznie zmienić rozmiar czcionki, gdy odwiedzający wchodzi w interakcję z interfejsem zmiany rozmiaru.

Zresetuj rozmiar czcionki

pod naszą instrukcją „var resize” dodamy instrukcję, która zresetuje czcionkę do jej oryginalnego rozmiaru.

 var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });

to polecenie wywołuje elementy lub klasy zapisane w zmiennej „resize”, a po kliknięciu łącza z klasą „reset” atrybut font-size w CSS powróci do pierwotnego rozmiaru.

$(„.reset”).click (function () wywołuje klasę „reset” z HTML. Dzięki temu jQuery może zresetować rozmiar czcionki, gdy użytkownik wchodzi w interakcję z tekstem powiązanym z klasą „reset”. W naszym przykładzie ten tekst jest po prostu linkiem „Resetuj”.

Zwiększ rozmiar czcionki

następnie musimy dodać polecenie, które zwiększy rozmiar czcionki. W naszym przykładzie dodaliśmy klasę „increase” do łącza”+”, więc musimy powiązać akcję jQuery zwiększania rozmiaru z”+”.

ten przykład właśnie to robi.

//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; });

przykład zaczyna się od ustalenia, że ta instrukcja jest zależna od kliknięcia przez użytkownika tekstu powiązanego z klasą „zwiększ”. W naszym przykładzie jest to”+”. Kolejne trzy linie dodają nowe zmienne: originalFontSize, originalFontNumber i newFontSize.

originalFontSize Pobiera bieżący rozmiar czcionki z CSS i przechowuje go. originaFontNumber parsuje tę liczbę, aby jQuery mógł ją odczytać. Następnie newFontSize pobiera liczbę zapisaną w originalFontNumber i mnoży ją przez 1.2.

następnie ostatnia linia przechodzi do CSS i zmienia rozmiar czcionki, aby pasował do newFontSize.

ta sekwencja zostanie wykonana za każdym razem, gdy zostanie kliknięte”+”.

Zmniejsz rozmiar czcionki

polecenie zmniejsz jest bardzo podobne do poprzedniego. Jednak zamiast mnożyć rozmiar czcionki przez liczbę, która zwiększy oryginalny numer czcionki, Instrukcja zmniejsz mnoży oryginalny numer czcionki przez dziesiętny, co zmniejsza go.

//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; });});

ta sekwencja zostanie wykonana za każdym razem, gdy zostanie kliknięte” -„. Zmniejszy to rozmiar czcionki przy każdym kliknięciu.