Главная » 2011 » Февраль » 4 » Динамичное изменение размера шрифта на сайте (Javascript)
04.02.2011, 14:27

Динамичное изменение размера шрифта на сайте



Скрипт позволяет вашим пользователям легко и удобно менять размер шрифта на сайте. Очень полезно.

В head вставляем это:

Code

<style>#fontresize {
background:url(mtop1.png) repeat-y;
border:#aaa 1px solid;
color:#505050;
font:bold 12px arial,helvetica,sans-serif;
padding:5px 1px 0;
position:fixed;
top:5px;
left:5px;
text-align:center;
}
*html #fontresize {
position:absolute;
left:10px;
top:expression(eval(document.documentElement.scrollTop) + 5 + 'px')}
#fontresize a {
text-decoration: none;
background:url(mtop.png) repeat-x;
border:#c0c0c0 1px solid;
color:#c0c0c0;
display:block;
font:bold 12px arial,helvetica,sans-serif;
margin:1px 0;
padding:2px;
}
#fontresize a:hover {
text-decoration: none;
border:#505050 1px solid;
color:#505050;}
#fontresize a:active {
text-decoration: none;
border:#505050 1px solid;
color:#505050;}</style>

Quote

<script type="text/javascript">
var fr="";
for (i=12; i<25; i++) fr+="<a title='Изменить размер шрифта на "+i+"px' onclick=\"document.getElementById('content').style.fontSize='"+i+"px'; return false;\" href=\"javascript://\">"+i+"</a> ";
document.write("<div id='fontresize'>Ш<br>р<br>и<br>ф<br>т<br> "+fr+"</div>");
</script>

Красное - это id блок, внутри которого будет изменяться размер шрифта.

Синее - это минимальный размер шрифта.

Зеленое - максимальный размер шрифта.

Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: TRANE73
Категория: JavaScript's | Просмотров: 4512 | Добавил: antisept | Рейтинг: 4.0/1 |
Теги: сайте, размера, динамичное, шрифта, изменение, На
Всего комментариев: 1
0  
1 Kross   (04.08.2011 09:20) [Материал]
Аватар пользователя
Классная статья только если кто-то хочет в одну строчку и позицию не с боку сайта вот пользуйтесь на здоровья:

Code
<!-- CSS -->
#fontresize {

background:url(mtop1.png) repeat-y;
border:#aaa 0px solid;
color:#505050;
font:bold 12px arial,helvetica,sans-serif;
padding:5px;
text-align:left;
margin:15px;
}
*html #fontresize {
top:expression(eval(document.documentElement.scrollTop) + 5 + 'px')}
#fontresize a {
text-decoration: none;
background:url(mtop.png) repeat-x;
border:#c0c0c0 1px solid;
color:#c0c0c0;
font:bold 12px arial,helvetica,sans-serif;
margin:1px 0;
padding:2px;
}
#fontresize a:hover {
text-decoration: none;
border:#505050 1px solid;
color:#505050;}
#fontresize a:active {
text-decoration: none;
border:#505050 1px solid;
color:#505050;}

<!-- END CSS -->


И сам блок:
Code

<script type="text/javascript">
var fr="";
for (i=12; i<25; i++) fr+="<a title='Изменить размер шрифта на "+i+"px' onclick=\"document.getElementById('shrift').style.fontSize='"+i+"px'; return false;\" href=\"javascript://\">"+i+"</a> ";
document.write("<div id='fontresize'>Выберите размер шрифта: "+fr+"</div>");
</script>

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]