ElLibr

электронные книги, компьютерные программы, картины

Опрос

С какой целью Вы читаете?
Всего ответов: 97
Онлайн всего: 1
Гостей: 1
Пользователей: 0
 Приглашаем к сотрудничеству рекламодателей 

Статьи

Статьи » Веб-мастеру. Плавное увеличение картинки при наведении на нее курсора мыши (**)
Веб-мастеру. Плавное увеличение картинки при наведении на нее курсора мыши (**)
 
     У начинающих веб-мастеров часто возникают вопрос: как сделать так, чтобы рисунок, размещенный на веб-странице увеличивался при наведении на него курсора мыши? Например, вот так:
     Или так:
      Делается все очень просто.
      1. Открываем блокнот и копируем в него код: img.expando{
border: none;
vertical-align: bottom;

}
    
Теперь сохраняем файл на жестком диске компьютера, назвав его imagesize.css
 
 
     2. Аналогично создаем файл imagesize.js (скачать готовый файл). Вот его код: if (document.images){
(function(){
var cos, a = /Apple/.test(navigator.vendor), times = a? 20 : 40, speed = a? 40 : 20;
var expConIm = function(im){
im = im || window.event;
if (!expConIm.r.test (im.className))
im = im.target || im.srcElement || null;
if (!im || !expConIm.r.test (im.className))
return;
var e = expConIm,
widthHeight = function(dim){
return dim[0] * cos + dim[1] + 'px';
},
resize = function(){
cos = (1 - Math.cos((e.ims[i].jump / times) * Math.PI)) / 2;
im.style.width = widthHeight (e.ims[i].w);
im.style.height = widthHeight (e.ims[i].h);
if (e.ims[i].d && times > e.ims[i].jump){
++e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
} else if (!e.ims[i].d && e.ims[i].jump > 0){
--e.ims[i].jump;
e.ims[i].timer = setTimeout(resize, speed);
}
}, d = document.images, i = d.length - 1;
for (i; i > -1; --i)
if(d[i] == im) break;
i = i + im.src;
if (!e.ims[i]){
e.ims[i] = {im : new Image(), jump : 0};
e.ims[i].im.onload = function(){
e.ims[i].w = [e.ims[i].im.width - im.width, im.width];
e.ims[i].h = [e.ims[i].im.height - im.height, im.height];
e (im);
};
e.ims[i].im.src = im.src;
return;
}
if (e.ims[i].timer) clearTimeout(e.ims[i].timer);
e.ims[i].d = !e.ims[i].d;
resize ();
};
expConIm.ims = {};
expConIm.r = new RegExp('\\bexpando\\b');
if (document.addEventListener){
document.addEventListener('mouseover', expConIm, false);
document.addEventListener('mouseout', expConIm, false);
}
else if (document.attachEvent){
document.attachEvent('onmouseover', expConIm);
document.attachEvent('onmouseout', expConIm);
}
})();
}
     3. Загружаем оба файла и рисунок на сервер, например в корневой каталог сайта.
     4. В нужное место страницы вставляем код (скачать zip-архив с txt-документом, содержащим код).
Он дан с учетом того, что все три файла находятся в корневом каталоге, в противном случае нужно будет изменить в коде адреса файлов. Также можно изменить начальные размеры рисунков (параметры width="ШИРИНА" height="ВЫСОТА"). Помните, – никаких визуальных редакторов. Результат работы:
 
 Если Вам понравилась эта статья и Вы хотите поддержать сайт, кликните по кнопке Google +1.
 
Категория: Софт | Просмотров: 21446 | Добавил: mamekh | Теги: увеличение картинки, скрипт
Всего комментариев: 181 2 »
18  
Скрипт элегантный и красивый... но.... у меня увеличенная картинка вылезает за границу сайта.... можно как то повлиять на размеры, чтобы не на весь экран картинка увеличивалась?

17  
у меня не работает почему-то

16  
У меня тоже не получается.

15  
Всем привет. А можно сделать так, чтобы не добавлять "ИМЯ РИСУНКА", а автоматом чтобы увеличивались все рисунки, в не зависимости от того, где они лежат?

14  
Спасибо. Всё получилось. Подскажите способ, как сделать, чтобы фото увеличивалось поверх всего остального?

13  
Спасибо огромное! Всё работает!

12  
Статья понравилась, попробую добиться результата.

11  
Реально! Просто большое человеческое спасибо!!!!

10  
Плавное увеличение изображения при наведении курсора с помощью css!
Плюс этого метода в том, что реализация основана на чистом css.
код css:


Code

img:hover {
  opacity: 0.4;
  /* Скорость увеличения */
  -webkit-transition-duration: 0.7s;
  -moz-transition-duration: 0.7s;  
  -o-transition-duration: 0.7s;
  /* Степень увеличения */
  -webkit-transform:scale(1.2);  
  -moz-transform:scale(1.2);  
  -o-transform:scale(1.2);  
  z-index: 0;
}

9  
Получилось с jpg, с png не работает.

1-10 11-18
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]