Плагин jQuery для имитации увеличения страницы браузера / увеличения текста?

Question

Я ищу плагин jquery для создания эффекта увеличения или увеличения текста (например, FF 3 ctrl ++ / ctrl--), который может ...

1. изменить размер текста с другой настройкой размера шрифта (т. Е. Масштаб текста / масштаб страницы)

2. работа со сложной структурой HTML + CSS

Любая рекомендация здесь?

Answer 1

Установите contentWidth на требуемую минимальную видимую ширину.

jQuery(document).ready(function(){
    jQuery(window).bind('resize load', function(){
        contentWidth = 1010;
        jQuery('body').css('zoom', jQuery(window).width() / contentWidth);
    });
});

Протестировано с Chrome.

Answer 2

Если вы ищете масштабирование текста, самый простой способ сделать это - указать базовый размер шрифта для вашего body в абсолютных единицах, например, body { font-size: 13pt; }, а затем заставьте все остальное использовать относительные единицы, например, .postTitle { font-size: 120%; }.

Тогда, если у вас есть +/- ссылки для увеличения или еще много чего:

$('#enlargeText').click(function () {
    $(document.body).css('font-size', $(document.body).css('font-size') * 1.5);
}

Это увеличит все размеры шрифта относительно body.

Однако, если вы хотите смоделировать масштабирование страницы (в отличие от масштабирования текста), вам также придется либо указать размеры изображения в относительных единицах, либо перебрать все изображения и изменить их размер соответственно:

$('#enlargeText').click(function () {
    $('img').each(function () {
        this.width *= 1.5;
    })
}

Но тогда вы все еще застряли с фоновыми изображениями CSS, размер которых не был изменен. AFAIK, это возможно только с использованием CSS 3, который широко не поддерживается, или с помощью изменения размеров версий всех этих изображений на сервере. Затем вы можете просто активировать новую таблицу стилей, которая ссылается на эти большие / меньшие изображения.

Answer 3

Вы могли бы сделать это так.Для последующих страниц требуется подключение к куки-файлу, хотя

var currZoom = $("body").css("zoom");
if(currZoom == 'normal') currZoom=1; // For IE

$(".zoomIn").click(function(){
    currZoom*=1.2;
    $("body").css("zoom",currZoom);
});
$(".zoomOff").click(function(){
    jQuery("body").css("zoom",1);
});
$(".zoomOut").click(function(){
    currZoom*=.8;
    $("body").css("zoom",currZoom);
}); 

HTML

<span class="zoomIn" style="font-size:120%">A</span>
<span class="zoomOff">A</span>
<span class="zoomOut" style="font-size:80%">A</span>