JQuery. Плавное увеличение объекта при наведении
Посмотрим, как с помощью jquery при наведении плавно увеличивать объект. Пусть, например, это будет картинка.
Итак, для этого нам понадобятся две картинки, маленького и большого размера. Это нужно, чтобы при увеличении маленькая картинка заменялась большой, т.к. браузеры растянутые картинки смазывают/сглаживают и она становится не четкой, а ие6 еще хуже, растягивает ее без сглаживания, и на картинке появляются квадратики и прочий мусор.
Собственно, приступим сразу к коду, с которого становится понятно, как происходит анимация. Код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JQuery. Увеличение объекта при наведении</title> <style type="text/css"> body{padding:10px 100px;} .zoom{ position:relative; cursor:pointer; left:0; top:0; } </style> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('.zoom').hover(function(){ $(this).stop().animate({width:"130px",height:"130px",left:"-25px",top:"-25px"}, 400); $(this).attr("src","pic2.png"); }, function(){ $(this).stop().animate({width:"50px",height:"50px",left:"0",top:"0"}, 400); $(this).attr("src","pic1.png"); }); }); </script> </head> <body> <h1>JQuery. Увеличение объекта при наведении</h1> <img src="pic1.png" class="zoom" alt="" /> </body> </html> |
Метки: jquery, увеличение объекта
Комментарии (32) на “JQuery. Плавное увеличение объекта при наведении”
Оставить комментарий
Для вставки кода используйте <code> ... </code>.
Loading ...
Клёвый пример давненько искал, вот наткнулся спасибо автору!
блин в джумле не получается,куда там этот код вставить,в редактирование html в шаблоне? я вставил ничего не выходит,надо ли путь до картинки полностью прописывать?
А как такое с текстом проделать?
анимировать font-size?
а как его анимировать?
Посмотрите внимательно скрипт в статье и увидите что картинка увеличивается путем анимации ширины и высоты картинки. Попробуйте просто анимировать font-size.
понял. спасибо
Как правильно?
$(this).stop().animate({font-size:»40pt»}, 400);
или
$(this).stop().animate({font-size:»40px»}, 400);
или
$(this).stop().animate({font-size:»+=40pt»}, 400);
или еще как-то
ни один вариант не работает
Надо ли font-size в стилях прописывать?
и что менять в $(this).attr(«src»,»pic2.png»); ?
Вот так вот сделай:
$(function(){
$(‘.zoom’).hover(function(){
$(this).stop().animate({fontSize:»40px»}, 400);
},
function(){
$(this).stop().animate({fontSize:»12px»}, 400);
});
});
*кавычки только на двойные поправь.
Спасибо! Работает
Данный пример можно упростить, и оставить в HTML всего одну картинку:
В CSS в класс .zoom добавить width:50px; height:50px;
А JavaScript сократить до:
$(function(){
$(‘.zoom’).hover(function() { $(this).stop().animate({width:»130px»,height:»130px»,left:»-25px»,top:»-25px»},400); },
function() { $(this).stop().animate({width:»50px»,height:»50px»,left:»0″,top:»0″},400); });
});
В Opera 9.5 не работает, в FF и IE6 все ок, скажите пожалуйста это можно как-то исправить для оперы?
А как сделать что-бы такой эфект был если картинок много.
Большое спасибо, полезная инфо, давно искал.
А КАК ПРОДЕЛАТЬ ТАКОЕ ДЛЯ НЕСКОЛЬКИХ КАРТИНОК, ОНИ У МЕНЯ ВЫСТРАИВАЮТСЯ ПО ВЕРТИКАЛИ ???????
sep.ukraine@gmail.com
вот здесь посмотри,похоже то что тебе надо..http://isucoz.com/news/2009-1-25-404-0-2
Когда в цикле картинки выводятся, у всех качество портится, будто без сглаживания становятся (кроме браузера Chrome). Подскажите, как можно исправить.
Че за тупой пример?
А если мне нужно 9 или 59 картинок вывести? Их что все в функцию прописывать? Бред!
bobiboba, нет конечно, надо будет видоизменить функцию.
Можно ещё использовать плагин fancybox jquery для организации качественной галлереи и видео. На сайте организовал используя этот плагин.
http://baza-lesnik.ru
Как видоизменить функцию для нескольких картинок ?
Вот так:
$(function(){
$(‘.zoom’).hover(function(){
$(this).stop().animate({width:»130px»,height:»130px»,left:»-25px»,top:»-25px»}, 400);
},
function(){
$(this).stop().animate({width:»50px»,height:»50px»,left:»0″,top:»0″}, 400);
});
});
В тегах картинок указываешь
class=»zoom»
опа, наконецто нашел то что надо! спасибо за пример, код стырю)
Спасибо, наконец-то нашел
Пример классный! Респект автору. Только можно-ли сделать так, чтобы большое изображение на сдвигало нижестоящий текст???
всё хорошо, сайт полезный. огромное спасибо.
одна просьба: сделайте навигатор по страницам, что внизу — поудобнее.
не знаю как у других, но у меня — цифры стоят вплотную. неудобно.
и смена цвета пункта-цифры была бы полезна.
А как же сделать, чтобы увеличивающаяся картинка не смещала все элементы страницы, находящиеся снизу??
У меня получается, что текст оказывается поверх увеличенной картинки. Можно ли это как-то исправить?
Для того, чтобы картинка выезжала на передний план
в CSS надо добавить
position:absolute;
Так как же выводить несколько картинок?
(То есть по две — одна без наведения, другая с наведением)?
С вариантом указывать просто class=zoom не подходит потому что это просто растягивается первая картинка, при этом теряется качество.
Спасибо за урок, то что надо! )