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

Question

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

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

Answer 1

你可以使用自定义css类来实现，请查看下面的示例。

希望这有帮助。

＆＃13;

＆＃13;

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

＆＃13;

    .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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;