ElLibr

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

Опрос

Сколько часов в неделю, в среднем, Вы читаете?
[ Результаты · Архив опросов ]
Всего ответов: 126
Онлайн всего: 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="ВЫСОТА"). Помните, – никаких визуальных редакторов. Результат работы:
 
Категория: Софт | Просмотров: 23528 | Добавил: mamekh | Теги: увеличение картинки, скрипт
Всего комментариев: 181 2 »
18 Анна  
0
Скрипт элегантный и красивый... но.... у меня увеличенная картинка вылезает за границу сайта.... можно как то повлиять на размеры, чтобы не на весь экран картинка увеличивалась?

17 Мария Служаева  
0
у меня не работает почему-то

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

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

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

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

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

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

10 Nemo-tec  
0
Плавное увеличение изображения при наведении курсора с помощью 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 Adamus  
0
Получилось с jpg, с png не работает.

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