Question

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

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

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

相关问题是他们如何实施“全屏模式”。这个问题是asked before，但两年前他们还在使用Flash。

Answer 1

我建议它可能是canvas元素的简单转换，但看看它们的来源似乎并非如此。

相反，看起来“放大”功能只会影响页面上的img标记，所以我想他们可能只是动态修改width和{{1}这些标签的属性。它不是一种非常复杂的方法，当然也不依赖于HTML5中引入的任何东西。

编辑：

Chrome的开发者工具非常出色。如果您在缩放之间观察DOM，则很容易确定效果的实现方式。这是标记在页面默认状态下的样子：

height

...并在缩小一次之后：

<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的<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>和width。
使用webkit-transform CSS属性根据需要向上或向下缩放内容。

scribd如何实现缩放？

1 个答案: