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

Источник

Описание

Чтобы не сильно искажать макет страницы при изменение размера шрифта, мы будем менять размер шрифта только для элементов, у которых font-size определен в ‘em‘ и ‘%‘.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

$(document).ready(function(){
   // Сохраняем оригинальный размер шрифта
   var originalFontSize = $('html').css('font-size');
   $(".resetFont").click(function(){
      $('html').css('font-size', originalFontSize);
   });
   // Увеличение
   $(".increaseFont").click(function(){
      var currentFontSize = $('html').css('font-size');
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*1.2;
      $('html').css('font-size', newFontSize);
      return false;
   });
   // Уменьшение
   $(".decreaseFont").click(function(){
      var currentFontSize = $('html').css('font-size');
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*0.8;
      $('html').css('font-size', newFontSize);
      return false;
   });
});

У скрипта есть ограничение – при переходе от страницы к странице, выбранное пользователем значение размера шрифта не сохраняется

Категории: jQuery примеры, пользовательский интерфейс, текст

Похожие записи: Начало работы с jQuery | Плавная горизонтальная или вертикальная прокрутка страницы | всплывающие блоки подсказок и советов | Довольно простой слайдер сделанный на jQuery и CSS3 | Циклическая смена элементов |

Оставьте свой комментарий