scribd如何实现缩放？

Question

Scribd的缩放功能非常出色。当您点击+和 - 按钮时，所有页面内容（包括图像和文本）将按比例放大。

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

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

一个相关的问题是，他们如何实现自己的“全屏模式”。这个问题是asked before，但那是两年前他们还在使用Flash的时候。

Answer 1

我认为它可能是一个canvas元素的简单改造，而是看着自己的源这似乎并不如此。

相反，它看起来像“放大”功能只影响页面上的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。
2. 使用webkit-transform CSS属性根据需要向上或向下扩展的内容。