Как реализовать масштабирование scribd?

Question

Функция масштабирования Scribd очень впечатляет. Все содержимое страницы, включая изображения и текст, пропорционально увеличивается при нажатии на их кнопки + и -.

Например, попробуйте на http://www.scribd.com/html5.

Как они это делают? Это, похоже, не так просто, как управлять масштабированием браузера (хотя контроль самого масштабирования браузера не является простым, если вообще невозможно)!

Связанный вопрос будет заключаться в том, как они реализуют свой «полноэкранный режим». Этот вопрос был asked before, но это было два года назад, когда они все еще использовали Flash.

Answer 1

Я бы предположил, что это может быть простая трансформация элемента canvas, но, глядя на их источник, это, похоже, не так.

Вместо этого, он выглядит как функция «Zoom In» влияет только на img тегов на странице, так что я бы сказал, что, возможно, они просто динамически изменяя width и height атрибутов для этих тегов. Это не очень сложный подход и, конечно же, не полагается на что-либо, введенное в HTML5.

Редактировать:

Инструменты разработчика Chrome отличные. Если вы наблюдаете DOM между масштабированиями, легко определить, как реализуется эффект. Вот что разметка выглядит на странице в состояние по умолчанию:

<div class="outer_page only_ie6_border" id="outer_page_1" 
    style="width: 516.8000000000015px; height: 400px; "> 
     <div class="newpage" id="page1" 
      style="width: 902px; height: 697px; 
       -webkit-transform: scale(0.5729490022172966); 
       -webkit-transform-origin-x: 0%; 
       -webkit-transform-origin-y: 0%; "> 
     ... 
</div> 
</div> 

... и после масштабирования один раз:

<div class="outer_page only_ie6_border" id="outer_page_1" 
    style="width: 646.0000000000018px; height: 500px; "> 
     <div class="newpage" id="page1" 
      style="width: 902px; height: 697px; 
       -webkit-transform: scale(0.7161862527716206); 
       -webkit-transform-origin-x: 0%; 
       -webkit-transform-origin-y: 0%; "> 
     ... 
</div> 
</div> 

... и после масштабирования снова:

<div class="outer_page only_ie6_border" id="outer_page_1" 
    style="width: 807.5000000000023px; height: 624px; "> 
     <div class="newpage" id="page1" 
      style="width: 902px; height: 697px; 
       -webkit-transform: scale(0.8952328159645258); 
       -webkit-transform-origin-x: 0%; 
       -webkit-transform-origin-y: 0%; "> 
     ... 
</div> 
</div> 

Похоже, что они внедрили свой эффект увеличения, выполнив две вещи:

1. Увеличение width и height контейнера div.
2. Использование свойства CSS webkit-transform для масштабирования содержимого вверх или вниз по мере необходимости.