如何實現放大縮小按鈕點擊jquery

Question

當我們點擊按鈕頁面時應該全屏顯示，再次點擊同一個按鈕時，頁面應顯示爲正常模式。

Actully我想要的功能與Adobe Indesign Zoom功能相同。

Answer 1

你可以實現使用自定義CSS類，檢查示例波紋管。

希望這會有所幫助。

---

$('#maximize').on('click', function(){ 
 
    $('#container').toggleClass('fullscreen'); 
 
})

.fullscreen{ 
 
     z-index: 9999; 
 
     width: 100%; 
 
     height: 100%; 
 
     position: fixed; 
 
     top: 0; 
 
     left: 0; 
 
     padding: 0px; 
 
     margin: 0px; 
 
     overflow-x: hidden; 
 
    } 
 
    div{ 
 
     width:100px; 
 
     height:100px; 
 
     background-color:green; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'> 
 
    <button id='maximize'>[M]</button> 
 
</div>