scribd는 줌 기능을 어떻게 구현합니까?

Question

Scribd의 확대/축소 기능이 매우 인상적입니다. + 및 - 버튼을 클릭하면 이미지 및 텍스트를 포함한 모든 페이지 내용이 비례하여 확대됩니다.

예를 들어 http://www.scribd.com/html5에서 시도해보십시오.

어떻게하면 되나요? 브라우저 줌을 제어하는 ​​것만 큼 단순하지는 않습니다. (브라우저 줌 자체를 제어하는 ​​것이 불가능하지 않으면 간단하지 않습니다.)

관련 질문은 '전체 화면 모드'를 구현하는 방법과 관련이 있습니다. 이 질문은 asked before 이었지만 아직 플래시를 사용하고있는 2 년 전이었습니다.

Answer 1

나는 그것이 canvas 요소의 단순한 변환일지도 모른다고 제안하고 있지만, 그 출처를 살펴보면이 경우에는 나타나지 않습니다.

는 대신, "확대"기능은 페이지의 img 태그에 영향을 미치는처럼 보이는, 그래서 아마 그들은 단지 동적으로 해당 태그에 대한 width 및 height 속성을 수정하는 것을 말하는 것입니다. 매우 정교한 방식은 아니며 HTML5에 도입 된 것에 의존하지 않습니다.

편집 :

크롬의 개발자 도구는 우수합니다. 줌 사이의 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 속성을 사용하여 필요에 따라 내용을 확대 또는 축소합니다.