Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Abaixo você encontrará uma forma rápida de inserir em sua página um manipulador de tamanho de fonte.
ATENÇÃO: Para que este script funcione é necessaria a utilização do Jquery
Estruturando o HTML
<ul id="fontes">
<li><a href="javascript:void(0);">A</a></li>
<li><a href="javascript:void(0);">A</a></li>
<li><a href="javascript:void(0);">A</a></li>
</ul>
* Neste exemplo utilizo um id na lista, ela será importante pois servirá de referência para a função.
* A quantidade de links ( A ) é opcional, a função ira manipular o tamanho da fonte proporcionalmente de acordo com a quantidade de links.
Estruturando o CSS
O estilo da lista varia de acordo com as necessidades do layout, o único atributo que quase sempre será aproveitando é que deixará a lista inline.
#linkAcess li{
display: inline;
}
//ou
#linkAcess li{
float: left;
}
Chamando a função
No onload da página chamo a seguinte função:
//chamo a funcao
$(function() {
controlerFontSize('#fontes','#boxConteudo',2,'.fixedSize');
});
* Onde o 1 parametro refere-se a id que incluímos em nossa < ul >
* O 2 parâmetro refere-se ao objeto container de toda a manipulação ( caso queira na página toda, passa a string body )
* O 3 parâmetro trata a quantidade de pixels que a fonte irá aumentar
* E o 4 referencia os objetos que não serão manipulados pela função mesmo estando dentro do container.
A função
function controlerFontSize(obj,container,multipleSize,dontChangeMe){
//inicializo os valores
var lastSize = 0;
var size = 0;
$(obj).find('a').click(function(){
//guardo todos os objetos da lista
var objs = $(this).parents(obj).find(this.tagName);
//guardo o indice do intem selecionado
var actualIndex = $(objs).index(this);
//guardo na variavel size o tamanho selecionado
for(var i=0; i<objs.length; i++){
if(actualIndex > $(objs).index($(objs).eq(i)))
size = size + multipleSize;
}
//altero o valor do font size subtraindo o ultimo valor
$(container).find('*:not(dontChangeMe *)').animate({
fontSize: '+=' + (size - lastSize) + 'px'
},'fast')
//atualizo as variaveis
lastSize = size;
size = 0;
})
}
*Sempre existe aquele objeto dentro do nosso container que não queremos que seja manipulado para isso usamos a variavel dontChangeMe que neste caso é a classe .fixedSize, ou seja, todos os conteudos contidos dentro dos objetos com essa classe não serão alterados.
Abraços!
Carregando comentários...