2016-10-24 3 views
0

Я использую это изображение 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; 
} 
+0

Использование JavaScript или jQuery –

+0

Возможно, [плагин масштабирования jQuery] (http://www.elevateweb.co.uk/image-zoom/examples)? – VDWWD

+0

@VDWWD это можно работать. Я пытаюсь. Спасибо. Но дело в том, что мои изображения загружены

, а jquery's -

ответ

1

Вы можете использовать кнопку с обработчиком onclick javascript, который устанавливает класс css. Тогда вы можете использовать атрибут css3 scale, если присутствует класс set.

 Смежные вопросы

  • Нет связанных вопросов^_^