Puede usar jQuery para dar a los visitantes de su sitio web la capacidad de cambiar el tamaño de la fuente de su sitio. Esta es una interfaz útil para tener, ya que sus visitantes pueden ampliar o reducir el tamaño de la fuente en su tiempo libre, brindándoles la mejor experiencia de lectura. Si no está familiarizado con jQuery, consulte nuestro artículo Fundamentos de jQuery para obtener una explicación de cómo funciona jQuery.
Esta es una pantalla de código interactivo que muestra el HTML, CSS, jQuery y una demostración de la salida.
Configurar HTML para Redimensionar
Lo primero que tiene que hacer es configurar su HTML para que jQuery pueda determinar qué redimensionar. Si no está familiarizado con el equipamiento de su documento HTML para hacer referencia a jQuery, consulte nuestro artículo Cómo preparar su HTML para jQuery.
Primero, debe agregar una interfaz de cambio de tamaño. No te preocupes, esto suena más complicado de lo que realmente es. Esto es solo algo con lo que los usuarios de su sitio web pueden interactuar para cambiar el tamaño de la fuente de su página web. Como puede ver en el ejemplo anterior, usamos enlaces que se representaban como más, menos y la palabra «restablecer».»
<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>
Cada enlace debe tener una clase que represente la acción, como «aumentar» o «disminuir».»Cuando agreguemos jQuery, usaremos estas clases para indicar qué enlace debe aumentar, disminuir o restablecer el tamaño de fuente.
Ahora, evalúe qué elementos o secciones desea cambiar de tamaño. Si se trata de una sección, es posible que desee crear un div <> con una clase para que pueda especificar un área única a cambiar de tamaño.
Vea el ejemplo de Clase de fuente de página web Pen jQuery: Redimensionamiento por Redes de pares (@pairdocs) en CodePen.
En el ejemplo anterior, puede ver que el < div> con la clase = «redimensionable» está marcado para redimensionarse. Sin embargo, el resto de los párrafos no se verá afectado, a menos que especifique que todos los elementos <p> también deben redimensionarse.
jQuery para redimensionar
jQuery se encarga del trabajo pesado de redimensionar. Si no está familiarizado con jQuery, consulte nuestro artículo Conceptos básicos de jQuery para hacerse una idea de los conceptos comunes.
El primer paso es crear un document (documento).función ready que encerrará todas tus instrucciones jQuery.
$(document).ready(function(){//jQuery statements//jQuery statements});
A continuación, vamos a agregar la primera instrucción jQuery para ir dentro de esta función.
var resize = new Array('element','.class'); resize = resize.join(',');
Esta instrucción establece qué elementos o clases deben incluirse en el cambio de tamaño. Estos elementos / clases se almacenan en la variable «redimensionar».»Si observa el ejemplo de fuente de redimensionamiento, verá que el elemento <p> y la clase» redimensionable » fueron elegidos para redimensionar.
Después de establecer qué elementos o clases se verán afectados, debe configurar el código para cambiar el tamaño de fuente cuando un visitante interactúe con su interfaz de redimensionamiento.
Restablecer el tamaño de fuente
En nuestra instrucción «var resize», vamos a agregar una instrucción que restablecerá la fuente a su tamaño original.
var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });
Esta instrucción llama a los elementos o clases que almacenó en la variable» resize «y, cuando se hace clic en el enlace con la clase» reset», el atributo font-size en CSS volverá a su tamaño original.
The $(«.restablecer»).click (function () llama a la clase «reset» desde el HTML. Esto permite a jQuery restablecer el tamaño de fuente cuando el usuario interactúa con el texto asociado con la clase «reset». En nuestro ejemplo, este texto es simplemente el enlace «restablecer».
Aumentar el tamaño de fuente
A continuación, necesitamos agregar una instrucción que aumente el tamaño de fuente. En nuestro ejemplo, agregamos la clase «increase» al enlace»+», por lo que necesitamos vincular la acción de jQuery de aumentar el tamaño al»+».
Este ejemplo hace precisamente eso.
//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; });
El ejemplo comienza estableciendo que esta instrucción depende de que un usuario haga clic en el texto asociado con la clase «increase». Este es un «+» en nuestro ejemplo. Las tres líneas siguientes añaden nuevas variables: Tamaño de fuente original, número de fuente original y tamaño de fuente nueva.
originalFontSize recopila el tamaño de fuente actual del CSS y lo almacena. originaFontNumber analiza este número para que jQuery pueda leerlo. Luego, newFontSize toma el número almacenado en originalFontNumber y lo multiplica por 1.2.
Luego, la última línea entra en el CSS y cambia el tamaño de fuente para que coincida con newFontSize.
Esta secuencia se ejecutará cada vez que se haga clic en»+».
Disminuir el tamaño de fuente
La instrucción decrease es muy similar a la instrucción anterior. Sin embargo, en lugar de multiplicar el tamaño de fuente por un número que aumentará el número de fuente original, la instrucción decrease multiplica el número de fuente original por un decimal, lo que lo reduce.
//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; });});
Esta secuencia se ejecutará cada vez que se haga clic en» -«. Esto reducirá el tamaño de la fuente con cada clic.
jQuery es un software de código abierto permisivo bajo una licencia MIT. jQuery no es un producto de Pair Networks, Inc. y Emparejar redes no ofrece garantía para jQuery. Tenga en cuenta que hay muchos niveles de bibliotecas de javascript disponibles. Consulte con su profesional de TI para obtener asesoramiento y orientación sobre una biblioteca adecuada. Este producto específico puede o no satisfacer sus necesidades. Pair Networks, Inc. proporciona soporte para este tutorial para su conveniencia y no es responsable del rendimiento de jQuery. Lea atentamente los términos y el alcance de los servicios para cualquier servicio o producto en línea que esté considerando comprar o usar.
