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

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

如果按下按钮，任何方式使图像的大小为％300？ /固定

1 个答案: