Zoom in/out a texto con boton [HTML - JS] - Trucodigo

Zoom in/out a texto con boton [HTML - JS]




Hola trucodigueros en esta ocacion les traigo la forma de hacer mas grande o pequeño el texto con boton (zoom in/out) con un poco de html y javascript bueno empecemos

Primero colocaremos esto antes del cierre del head

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
var divtxt = $('#fontdiv');
// Increase Font Size
$('#btnincfont').click(function() {
var curSize = divtxt.css('fontSize');
var newSize = parseInt(curSize.replace("px", "")) + 1;
$(divtxt).css("fontSize", newSize + "px");
});
// Decrease Font Size
$('#btndecfont').click(function() {
var curSize = divtxt.css('fontSize');
var newSize = parseInt(curSize.replace("px", "")) - 1;
$(divtxt).css("fontSize", newSize + "px");
})
});
</script>


y esto donde queramos que de la funcion de zoom

<form id="form1" runat="server">
<input type="button" id="btnincfont" value=" + " />
<input type="button" id="btndecfont" value=" - " />
<br>
<div id="fontdiv">
<!-- Aqui colocaremos el texto que desemos darle zoom -->
</div>
</form>


con esto los botones "+" y "-" haran la funcion de subir o bajar 1px con cada clic si quieres que sea mas pixeles con cada clic deberan buscar las siguientes lineas

var newSize = parseInt(curSize.replace("px", "")) + 1;
var newSize = parseInt(curSize.replace("px", "")) - 1;


y reemplazar el 1 por la cantidad de pixeles que quieran varial al original

Bueno eso seria todo espero les haya gustado y como siempre me despido dejandoles la

DEMO
Tags
Opciones
Estadísticas
Creado 19.11.2015 a las 21:42 hs
Categoría JavaScript
  • 0
    Medallas
  • 0
    Favoritos
  • 1442
    Visitas
  • 0
    Puntos
  • 0
    Seguidores
Posts relacionados
Comentarios
0
Cargando comentarios espera un momento...
No tienes permisos para comentar.

Para poder comentar necesitas estar Registrado. O.. ya tienes usuario? Logueate!
Patrocinador
Autor del post
Ver perfil de Omaredomex Omaredomex
Hombre Administrador  Mensaje
0 81 2
Medallas
No tiene medallas
Últimos visitantes