jquery - 如果按下按钮，有什么方法可以使图像大小为 %300？/已修复

Question

我使用这张图片 http://i.imgur.com/pmNyAzN.jpg但是正如您所看到的，文本不是很明显，所以我需要缩放它。我借用了一个翻书效果来创建我的页面，我想知道我是否可以创建一个按钮，当它被按下时使页面大小超过 300+，当它再次被按下时返回。

我有这个演示 http://www.vestigedayz.com/Lucius-Payne/ro/Capitolul1/Indisponibil/ (正如您在第 2 页看到的，您根本看不到文字)

我的 HTML :

<div class="flipbook-viewport">
    <div class="container">
        <div class="flipbook">
            <div style="background-image:url(pages/1.jpg)"></div>
            <div style="background-image:url(pages/2.jpg)"></div>
            <div style="background-image:url(pages/3.jpg)"></div>
            <div style="background-image:url(pages/4.jpg)"></div>
            <div style="background-image:url(pages/5.jpg)"></div>
            <div style="background-image:url(pages/6.jpg)"></div>
        </div>
    </div>
</div>

我的 CSS :

.flipbook-viewport{
    overflow:hidden;
    width:100%;
    height:100%;
}

.flipbook-viewport .container{
    position:absolute;
    top:50%;
    left:50%;
    margin:auto;
}

.flipbook-viewport .flipbook{
    width:922px;
    height:600px;
    left:-461px;
    top:-300px;
}

.flipbook-viewport .page{
    width:461px;
    height:600px;
    background-color:white;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

.flipbook .page{
    -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
    -o-box-shadow:0 0 20px rgba(0,0,0,0.2);
    box-shadow:0 0 20px rgba(0,0,0,0.2);
}

.flipbook-viewport .page img{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin:0;
}

Answer 1

您可以使用带有设置 css 类的 javascript onclick 处理程序的按钮。 如果设置类存在，则可以使用 css3 scale-attribute。