Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boas galera...
Acabou de sair do forno aqui um script que faz aquela 'famosa' mudança no tamanho das fontes, mto comum em sites de notícias...
Segue aí o código:
Javascript (usando jQuery):
function showFontChanger(){
$("ELEMENTO ANTES DO QUAL INSERIR O FONT CHANGER").before("<div id='font_changer'></div>");
$("#font_changer").append("<a href='javascript:void(0);' class='font-inc'>A<sup>+</sup></a>");
$("#font_changer").append("<a href='javascript:void(0);' class='font-reset'>A</a>");
$("#font_changer").append("<a href='javascript:void(0);' class='font-dec'>A<sup>-</sup></a>");
var original = 10;
var current = original;
var max = 18;
var min = 8;
$(".font-inc").click(function(){
if (current < max) {
current++;
$("ELEMENTO QUE TERÁ O TAMANHO DA FONTE ALTERADO").css("font-size", current + "pt");
}
(current >= max) ? $(".font-inc").addClass("inactive") : $(".font-inc").removeClass("inactive");
(current <= min) ? $(".font-dec").addClass("inactive") : $(".font-dec").removeClass("inactive");
});
$(".font-dec").click(function(){
if (current > min) {
current--;
$("ELEMENTO QUE TERÁ O TAMANHO DA FONTE ALTERADO").css("font-size", current + "pt");
}
(current >= max) ? $(".font-inc").addClass("inactive") : $(".font-inc").removeClass("inactive");
(current <= min) ? $(".font-dec").addClass("inactive") : $(".font-dec").removeClass("inactive");
});
$(".font-reset").click(function(){
current = original;
$("ELEMENTO QUE TERÁ O TAMANHO DA FONTE ALTERADO").css("font-size", current + "pt");
(current >= max) ? $(".font-inc").addClass("inactive") : $(".font-inc").removeClass("inactive");
(current <= min) ? $(".font-dec").addClass("inactive") : $(".font-dec").removeClass("inactive");
});
}
CSS:
#font_changer {
clear: both;
float: right;
margin-right: 2px;
background: #FFF;
padding: 4px;
}
#font_changer a {
display: inline-block;
height: 20px;
width: 20px;
line-height: 20px;
text-align: center;
text-indent: -999px;
overflow: hidden;
background: url(../images/icons_font_changer.png) no-repeat;
}
#font_changer a.font-inc {
background-position: left top;
}
#font_changer a.font-inc:hover {
background-position: left center;
}
#font_changer a.font-inc.inactive {
background-position: left bottom;
}
#font_changer a.font-dec {
background-position: right top;
}
#font_changer a.font-dec:hover {
background-position: right center;
}
#font_changer a.font-dec.inactive {
background-position: right bottom;
}
#font_changer a.font-reset {
background-position: center top;
}
#font_changer a.font-reset:hover {
background-position: center center;
}
Imagem dos links:
http://img705.images...fontchanger.png
Isso é tudo pessoal =D
Carregando comentários...