Heim > Web-Frontend > js-Tutorial > Hauptteil

Vollständiges Beispiel für die JS-Implementierung der Artikeltextgrößenfunktion_Javascript-Fähigkeiten

WBOY
Freigeben: 2016-05-16 16:32:15
Original
1593 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von js, um die Schriftgrößenfunktion des Artikeltexts zu realisieren. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

Text groß, mittel und klein ist eine Funktion, die viele Websites zur Erleichterung des Lesens bereitstellen. Die in diesem Artikel eingeführte Funktion für große, mittlere und kleine Textgrößen kann aktiviert werden, nachdem der Benutzer sie ausgewählt hat Wird ein anderer Artikel auf derselben Website geöffnet, wird die Schriftgröße entsprechend den Gewohnheiten des Benutzers angezeigt.

Bestimmt haben Sie auf einigen großen Websites die drei Schaltflächen „Groß“, „Mittel“ und „Klein“ unter dem Artikeltitel gesehen, die dazu dienen, auf die Lesegewohnheiten unterschiedlicher Personen einzugehen. Hier stelle ich diese Methode vor und sie unterstützt im Vergleich zu ihrer Methode das automatische Speichern. Wählen Sie sie einfach einmal aus und sie passt sich beim nächsten Lesen automatisch an Ihre bevorzugte Schriftgröße an.

JS-Codeteil:

Fügen Sie zunächst den folgenden JS in eine JS-Datei oder ein Skript-Tag ein:

Code kopieren Der Code lautet wie folgt:
jQuery.cookie = function(name, value, options) {
If (typeof value != 'undefiniert') {
Optionen = Optionen ||. {};
Wenn (Wert === null) {
              value = '';
options.expires = -1;
}
      var läuft ab = '';
If (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
          var date;
If (typeof options.expires == 'number') {
Datum = neues Datum();
date.setTime(date.getTime() (options.expires * 24 * 60 * 60 * 1000));
              } sonst {
Datum = Optionen.expires;
            }
läuft ab = '; läuft ab =' date.toUTCString();
}
        var path = options.path ? '; path=' options.path : '';
        var domain = options.domain ? '; domain=' options.domain : '';
        var secure = options.secure ? '; secure' : '';
           document.cookie = [Name, '=', encodeURIComponent(value), läuft ab, Pfad, Domäne, sicher].join('');
} sonst {
        var cookieValue = null;
If (document.cookie && document.cookie != '') {
               var Cookies = document.cookie.split(';');
for (var i = 0; i < Cookies.length; i ) {
              var cookie = jQuery.trim(cookies[i]);
If (cookie.substring(0, name.length 1) == (name '=')) {
                       cookieValue = decodeURIComponent(cookie.substring(name.length 1));
Pause;
                }
            }
}
          cookieValue zurückgeben;
}
};
Funktion SetFont(size){
$.cookie('Font_size', size, { läuft ab: 99999999 });
$(".context").css("font-size",size);//.context wird durch den Container Ihres Artikelinhalts ersetzt
};
$(document).ready(function(){
SetFont( $.cookie('Font_size') 'px' );
});

Ersetzen Sie den .context des Codes durch Ihren Artikelinhaltscontainer.

HTML-Codeteil:

Dann rufen Sie bei Bedarf den folgenden Code auf:

Code kopieren Der Code lautet wie folgt:

Sie können die Schriftgröße und den Text in der Funktion SetFont() anpassen.

Ich hoffe, dass dieser Artikel für alle bei der Webprogrammierung auf Basis von JavaScript hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage