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

【问题标题】：How to acheive Zoom in Zoom out on button click in jquery如何在jquery中实现按钮点击放大缩小
【发布时间】：2016-02-25 20:49:43
【问题描述】：

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

实际上我想要与 Adobe Indesign 缩放功能相同的功能。

【问题讨论】：

请阅读how to ask good questions 并尝试编辑您的问题。也不要对代码抱有希望，Stack Overflow 不是免费的代码编写服务。谢谢！

标签： jquery jquery-ui fullscreen

【解决方案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>

【讨论】：