Приветствую Вас Гость • Регистрация • Вход
Суббота, 19.10.2019
Главная » 2014 » Сентябрь » 25 » 3 простых способа увеличения изображения при наведении на картинку
20:33
3 простых способа увеличения изображения при наведении на картинку

На многих web-сайтах, которые занимаются продажей товаров, продуктов, рекламой и прочей хренью, мы часто замечаем то, что они используют функцию изменения размера изображения при клике или простого наведения курсора мышки на него. Пользователь выбирает рекламный товар и при наведении на фото он видит его в увеличенном формате, что очень удобно и эффективно.
Вывод, если клиент получит подробный вид продукта, есть шанс, что он купит этот продукт. Следовательно, они могут увеличить объем продаж продукции.
На одном из форумов был задан вопрос, есть ли способ плавного увеличения изображения при наведении курсора мышки на нее. Мне и самому стало интересно и я начал поиски решения данного вопроса, потому что это отличный способ сделать сайт более интерактивным.
Вот первый очень простой и быстрый способ плавного увеличения изображения при наведении курсора мышки на картинку с применением JS.

Код
<script type="text/javascript">
var gi,gd,gj=1,gn=20,gt=20,gs,swd,sht,lwd,lht;function sli(ii,wd1,ht1,wd2,ht2,s){gi=ii;gd=1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function ssi(ii,wd1,ht1,wd2,ht2,s){gd=-1;swd=wd1;sht=ht1;lwd=wd2;lht=ht2;gs=s;rs();}function xy(x1,x2,gj){return (x2-x1)*gj/gn+x1;}function rs(){var w=Math.round(xy(swd,lwd,gj));
var h=Math.round(xy(sht,lht,gj));
if(gs)gi.style.left=(swd-w)+"px";
gi.style.width=w+"px";gi.style.height=h+"px";if(gd>0 && gn>gj){gj++;setTimeout('rs()',gt);}else if(0>gd && gj>0){gj--;setTimeout('rs()',gt);}}
function imx(n){
var f;
for(var i=0;i< 5;i++){
f=document.getElementById('imx'+i);
if(f)f.className=(i==n)?"imxs":"";
f=document.getElementById('im'+i);
if(f)f.style.display=(i==n)?"":"none";
}
}
</script>

HTML:

Код
<img onmouseover="sli(this,312,200,550,250,0)" onmouseout="ssi(this,312,200,550,250,0)" title="" alt="" src="" width="312" height="200" />

(this, 312,200,550,250,0) представляет ширину и высоту изображения. Первые две цифры — размер эскизов, вторые два — увеличенный размер. Маленькие размеры этого изображения должны быть включены в . Иначе увеличенная версия появится по умолчанию.
При наведении курсора мышки на изображение картинка меняет свой размер и возвращается к исходному состоянию, когда мышь вне границы веб-объекта.
Так что, если вы планируете реализовать функцию масштабирования изображения или изменить размер картинки при наведении курсора на своем сайте, вы можете попробовать этот простой способ.
Вы можете посмотреть работу этого скрипта на этой странице, где расположено несколько изображений и все они могут плавно изменять исходный размер.

Второй способ это создание простого CSS3 увеличения по наведению мыши
Выше Вы узнали о том, как можно плавно увеличить изображение с применением JavaScript, теперь это можно легко сделать с помощью CSS3. Этот эффект работает только в Chrome, Opera Developer, Safari и FireFox . HTML:

 

Код
<a href="#"><img src="путь-к-image.jpg" alt=""></a>

CSS:

Код
img{
display: block;
opacity: 1;
-webkit-transform: scale(1,1);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 550ms;
-moz-transform: scale(1,1);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 550ms;
}
img:hover {
opacity: .9;
-webkit-transform: scale(1.11,1.17);
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 550ms;
-moz-transform: scale(1.11,1.17);
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 550ms;
}


В нормальном состоянии, мы устанавливаем масштаб блока до 100%. В состоянии наведения настроены на 111% и 117%. Обратите внимание, что Вы можете установить функцию времени и продолжительности эффекта перехода по наведению мыши, изменив цифру 550ms, а также поиграть с процентами масштабирования.
Третий вариант увеличения изображения при наведении курсора.
В этом случае для изменения размера картинки мы собираемся применить эффект zoom.
Разметка:
В HTML разметку на этот раз мы собираемся добавить класс zoom (для эффекта масштабирования) наряду с классом IMG для укладки наших изображений.

Код
<div class="zoom img"><img alt="" src="/image_zoom.jpg" /></div>

Адаптивный дизайн:
В этом эффекте масштабирования, мы укажем базовую ширину и высоту 200px х 200px и, чтобы реализовать эффекты плавного перехода зададим ему 2-секунды, добавив 100px по ширине и высоте, создавая иллюзию масштабирования.

Код
.zoom img {
width: 200px;
height: 200px;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
.zoom img:hover {
width: 300px;
height: 300px;
-webkit-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
-moz-box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
box-shadow: 0 0 40px rgba(255,255,255,.6), inset 0 0 40px rgba(255,255,255,1);
}

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

Категория: CSS | Просмотров: 901 | Добавил: Samosval |Рейтинг: 0.0/0


Всего комментариев: 0
avatar
    Яндекс.Метрика
Сайт создан в системе uCozЯндекс.Метрика