Я использую это изображение http://i.imgur.com/pmNyAzN.jpg, но, как вы можете видеть текст, он не очень заметен, поэтому мне нужно его увеличить. Я заимствовал эффект флип-книги, чтобы создать свою страницу, и я задаюсь вопросом, могу ли я создать кнопку, когда она будет нажата, чтобы сделать страницу размером 300+, и когда она снова нажата, чтобы вернуться назад.Любой способ сделать изображение размером до 300%, если нажата кнопка?/Fixed
У меня есть эта демо 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;
}
Использование JavaScript или jQuery –
Возможно, [плагин масштабирования jQuery] (http://www.elevateweb.co.uk/image-zoom/examples)? – VDWWD
@VDWWD это можно работать. Я пытаюсь. Спасибо. Но дело в том, что мои изображения загружены
, а jquery's - –