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屬性根據需要向上或向下擴展的內容。