jquery中点击按钮如何实现放大缩小

Question

当你点击按钮页面应该全屏显示，当再次点击同一个按钮时，页面应该以正常模式显示。

实际上我想要与 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>