0

Scribd のズーム機能は非常に印象的です。+ および - ボタンをクリックすると、画像やテキストを含むすべてのページ コンテンツが比例してズームされます。

たとえば、http://www.scribd.com/html5で試してみてください。

彼らはどのようにこれを行うのですか？ブラウザのズームを制御するほど単純ではないようです (ただし、ブラウザのズーム自体を制御することは、まったく不可能な場合でも簡単ではありません!)。

関連する質問は、「フルスクリーンモード」をどのように実装するかです。この質問は以前にもありましたが、それはまだ Flash を使用していた 2 年前のことです。

4

1 に答える 1

2

キャンバス要素の単純な変換である可能性があることをお勧めしますが、ソースを見るとそうではないようです。

代わりに、「ズームイン」機能はページ上のタグにのみ影響するように見えるので、おそらくそれらのタグのおよび属性をimg動的に変更しているだけだと思います. これはあまり洗練されたアプローチではなく、HTML5 で導入されたものにはまったく依存していません。widthheight

編集：

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>

そのため、次の 2 つのことを行うことでズーム効果を実装しているようです。

  1. コンテナ divのwidthandを増やします。height
  2. webkit-transform CSS プロパティを使用して、必要に応じてコンテンツを拡大または縮小します。
于 2012-01-14T02:30:18.957 に答える