scribd如何实现缩放？

Question

Scribd 的缩放功能非常令人印象深刻。当您单击 + 和 - 按钮时，所有页面内容（包括图像和文本）都会按比例缩放。

例如，请在 http://www.scribd.com/html5 上尝试。

他们是如何做到这一点的？它似乎不像控制浏览器缩放那么简单（尽管控制浏览器缩放本身并不简单，如果根本不可能！）

一个相关的问题是他们如何实现“全屏模式”。这个问题之前被问过，但那是两年前的事了，当时他们仍在使用Flash。

Answer 1

我建议这可能是 canvas 元素，但查看其来源，情况似乎并非如此。

相反，它看起来像“放大”功能只影响页面上的 img 标签，所以我想说它们可能只是动态修改 width 和 <这些标签的 code>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. 增加 容器 div 的宽度 和 高度。
2. 使用 webkit-transform CSS 属性来放大内容或根据需要向下。