0

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

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

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

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

4

1 回答 1

2

我建议这可能是对画布元素的简单转换，但看看它们的来源，情况似乎并非如此。

相反，它看起来像“放大”功能只影响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. 增加容器 div 的width和height。
  2. 使用webkit-transform CSS 属性根据需要放大或缩小内容。
于 2012-01-14T02:30:18.957 回答