Увеличение изображение в 2 клика на CSS3 - Скрипты - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Скрипты


Это простое увеличение изображение на сайте, которое будет происходить в два клика. При наведение и потом уже вторым идет клик. Здесь все сделано на чистых стилях, вам нужно изначально выставить размеры, которые изначально будут показывать форму. Это хорошо может подойти на комментарий, где для мобильных аппаратах картинка не будет вылазить за пределы. Когда вы просто наводите, то происходит небольшое увеличение, и здесь следует клик, и вот появляется картинка. Все будет работать на классе prostozoom, который как раз будет прикреплен к изображению.

Также для понятие, как все происходит, в самих стилях CSS все очень подробно описание, что идет и как работает, что вы можете сформировать как вам нужно для своего интернет ресурса. Также можно где то поставить не считая комментариев, это личные сообщение, где вам перекидывают картинку и она по умолчанию приходит в небольшом размере, здесь вы ее просто сами разворачиваете. Стили вы ставите к примеру в CSS и потом вам нужно только прописать класс, это может и в самом материале, и все будет работать в два клика. Как и где прописывать, можно посмотреть ниже как пример.

Переходим к установке:

Здесь вот как раз код ссылкой и class поставлен.
Code
<img src="http://zornet.ru/Aben/Gsa/zartyn/gdesaun.jpg" class="prostozoom">

CSS:
Code
/* - Установка элемента - */ 
.prostozoom{ 
/* - Ширина начальная - */ 
width:170px; 
/* - Высота начальная - */ 
height:100px; 

/* - Установка при наведении - */ 
.prostozoom:hover{ 
transform: scale(1.2, 1.2); 
-o-transform: scale(1.2, 1.2); 
-ms-transform: scale(1.2, 1.2); 

/* - Установка при нажатии - */ 
.prostozoom:active{ 
transform: scale(2.5, 2.5); 
-o-transform: scale(2.5, 2.5); 
-ms-transform: scale(2.5, 2.5); 
}

Здесь видим, что написано сам установочный элемент, потом при самом наведение и нажатие, что сами можете регулировать, главное поставить его по размерам, чтоб по умолчанию был, все в пикселях идет.

Но и не нужно забывать, если вы в стили не ставите, то можете просто прикрепить их к изображению.
Code
<style type="text/css">  
CSS прописываем  
</style>

Важно!

При копировании материала указывать ссылку на источник.

- 503
- 22-Ноября-2016
- 0
Материал разместил:

Похожий материал
Статьи сайта