Programação

Aumentar e diminuir tamanho da font com jQuery

Salve planeta terra, estou aqui com mais um tutorial de jQuery, hoje vou mostrar pra vocês como criar um script pra aumentar e diminuir tamanho da font com jQuery, essa opção é bastante usada em grandes portais para deixar que o visitante escolha o tamanho da font em sua leitura.

Veja aqui o exemplo

Como aumentar e diminuir tamanho da font com jQuery?

Passo 1: O jQuery

Vamos inserir o jQuery na nossa página e você pode colocar entre as tags < head >< /head > ou no rodapé do seu site (forma recomendada). Veja abaixo que estamos usando uma biblioteca jQuery versão 1.8 e esta sendo carregada direto da API do Google. Caso você já esteja chamando o jQuery na sua página, ignore essa etapa, caso você precise, veja esse post sobre conflito de jQuery.

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

Passo 2: O HTML

Bom, conforme vimos no exemplo, iremos criar dois botões com id´s diferentes, um para aumentar a font (#inc-font) e outro para diminuir (#dec-font), também iremos criar o conteúdo que vai ter o tamanho da font alterado.

Os botões são spans e dentro deles coloquei as imagens, o código ficou assim:

HTML

 <!-- ICONE DIMINUIR FONT -->
   <span id="dec-font">
     <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/decrease_font.png" alt="Diminuir" />
   </span>
   <!-- ICONE AUMENTAR FONT -->
   <span id="inc-font">
     <img src="https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/26/increase_font.png" alt="Aumentar" />
   </span>

Agora para o conteúdo, iremos criar uma div (.conteudo) e dentro dela vai todo o conteúdo a ser alterado com o botão para aumentar e diminuir tamanho da font com jQuery, o código ficou assim:

HTML

<div class="conteudo">
 <p>Mussum ipsum cacilds, vidis litro abertis. Consetis adipiscings elitis. Pra lá , depois divoltis porris, paradis. Paisis, filhis, espiritis santis. Mé faiz elementum girarzis, nisi eros vermeio, in elementis mé pra quem é amistosis quis leo. Manduma pindureta quium dia nois paga. Sapien in monti palavris qui num significa nadis i pareci latim. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis.</p>
<p>Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi. Aenean vel dui dui. Nullam leo erat, aliquet quis tempus a, posuere ut mi. Ut scelerisque neque et turpis posuere pulvinar pellentesque nibh ullamcorper. Pharetra in mattis molestie, volutpat elementum justo. Aenean ut ante turpis. Pellentesque laoreet mé vel lectus scelerisque interdum cursus velit auctor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac mauris lectus, non scelerisque augue. Aenean justo massa.</p>
<p>Casamentiss faiz malandris se pirulitá, Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer Ispecialista im mé intende tudis nuam golada, vinho, uiski, carirí, rum da jamaikis, só num pode ser mijis. Adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

Pronto, a marcação HTML esta criada, agora é hora de criar o script

Passo 2: O script

O script abaixo esta com sua maior parte comentado e você pode alterá-lo conforme sua necessidade, lembrando que devemos colocá-lo antes do fechamento da tag < /head > da sua página.

JS

<script type="text/javascript" charset="utf-8">
var $z = jQuery.noConflict();
// Use jQuery com a variavel $e(...)
$z(document).ready(function(){
$z("#inc-font").click(function () { //inicia a função ao clicar no id="inc-font"
    var size = $z(".conteudo p").css('font-size'); // altera o font size do <p> que esta dentro de .conteudo
    size = size.replace('px', '');
    size = parseInt(size) + 2; // aumenta 2px na fonte
    $z(".conteudo p").animate({'font-size' : size + 'px'}); // animação ao alterar font
  return false;
   });
  //diminuindo a fonte
  $z("#dec-font").click(function () { //inicia a função ao clicar no id="dec-font"
    var size = $z(".conteudo p").css('font-size'); // altera o font size do <p> que esta dentro de .conteudo
    size = size.replace('px', '');
    size = parseInt(size) - 2; // diminuir 2px na fonte
    $z(".conteudo p").animate({'font-size' : size + 'px'}); // animação ao alterar font
	return false;
  });
});
</script>

Clique aqui e veja o exemplo
Clique aqui e veja o código completo no GitHub
Clique aqui e faça download do arquivo do exemplo.

Bom, agora você já sabe como criar um botão para aumentar e diminuir tamanho da font com jQuery, ficou com alguma dúvida? Deu certo? Comentem!

Se o post te ajudou curte a página, não custa nada e me incentiva a continuar escrevendo.
Posts recomendados
Comentários

    Envie seu comentário.

    Seu email não será publicado