Плавное увеличение картинки при наведении курсора

Среда, Сентябрь 16, 2009 8:46 WebMast

Раньше я писал об увеличение картинки при наведении при помощи css. Но она была не доработана.

Совсем недавно, мне требовалось сделать что-то похожее, только на jQuery. И я доделал тот пример и добавил эффекты при помощи jQuery. Вообщем у меня получилось два варианта:

С использованием CSS, без jQuery.
С использованием CSS и jQuery.

Сейчас я покажу вам два варианта.

1. С использованием CSS, без jQuery

Html код:

<a class="st" href="javascript:">

     <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>

</a>

Css стили:

a.st .img{width:100px;height:124px;overflow:hidden;}

a.st .img img{width:100px;height:124px;}

a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}

a.st:hover .img img{visibility:visible;width:250px;height:274px;position:absolute;z-index:150;}

По сравнению с вариантом в прошлой статье, этот не раздвигает другой html вокруг. То есть картинка сама по себе, но в то же время, за ней закреплено место для маленькой картинки.

Посмотреть пример с использованием css, без jQuery

2. С использованием CSS и jQuery

Здесь мы оставим html код таким же, как и в предыдущем примере:

<a class="st" href="javascript:">

     <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div>

</a>

Вот теперь, css изменится:

a.st .img{width:100px;height:124px;}
a.st .img img{width:100px;height:124px;}
a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;}
a.st:hover .img img{visibility:visible;position:absolute;z-index:150;}

Принципы css одинаковы в двух вариантах, только во втором, ширину и высоту мы будем трансформировать при помощи jQuery.

JQuery скрипт:

$(function(){

    $('.img').hover(function(){

      $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400);

    }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); });

  });

При наведении курсора, мы плавно трансформируем ширину и высоту объекта, а затем, когда курсор будет убран, возвращаем css в исходное положение, опять же плавно.

Посмотреть пример с использованием css и jQuery

Вот мы и разобрали два примера реализации. Плюсы и минусы я приводить не буду, но скажу так, существенных проблем нет у обоих примеров.

Работает: Mozilla Firefox 3.5.2, Opera 10.00, Chromium 4.0.204.0, Konqueror 4.3.1.

Если вы нашли ошибку в коде, сообщите пожалуйста в комментариях.

Вы можете следить за любыми ответы на эту запись через RSS 2.0 feed.

Вы можете оставить ответ, или trackback с Вашего собственного сайта.

Теги: CSS, css трюки, html, jQuery

56 комментариев “Плавное увеличение картинки при наведении курсора”

dimedr сообщил:

Сентябрь 18th, 2009 16:12

спасибо, первый вариант очень подходит!
Станислав сообщил:

Октябрь 15th, 2009 20:36

а IE ведь тоже отображает без проблем...или это как само собой разумеющееся )
WebMast сообщил:

Октябрь 15th, 2009 20:45

Станислав, сейчас я не имею данной возможности тестировать в этом браузере. Скажите какой версии вы тестировали и я добавлю в статью.
Дмитрий сообщил:

Октябрь 21st, 2009 16:55

Ошибка в коде див внутри а это не есть гуд валидацию на validator.w3.org не пройдете
ЭМИЛЬ сообщил:

Октябрь 26th, 2009 21:12

помогите пожалуйста сделать так же как на сайте dedrkoi.ru ответ на zaiemil@ya.ru
Влад сообщил:

Ноябрь 6th, 2009 11:53

А как сделать чтоб открывлось не вниз вправо, а вверх и влево к примеру!
WebMast сообщил:

Ноябрь 6th, 2009 17:14

Влад, я бы делал так же, только поднимать вверх и делать отрицательный отступ слева. Примерно так: * Стандартные: 100×100. * animate(width:"150px", height:"150px", left:"-50px", top:"-50px"); Вот и все...
Анатолий сообщил:

Ноябрь 22nd, 2009 21:12

* animate(width:"150px", height:"150px", left:"-50px", top:"-50px"); В таком случае картинка прыгает резко в левый верхний угол.
WebMast сообщил:

Ноябрь 23rd, 2009 14:33

Блин, забыл о времени... Нужно время задать: animate({width:"150px", height:"150px", left:"-50px", top:"-50px"}, 400); Где 400 — это время в мс.
Seraph сообщил:

Ноябрь 24th, 2009 14:41

А можно выложить весь код, а то так не совсем понятно куда вставлять «animate({width:»150px", height:"150px", left:"-50px", top:"-50px"}, 400);"
WebMast сообщил:

Ноябрь 24th, 2009 15:28

Примерно вот так: $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({{width:»150px", height:"150px", left:"-50px", top:"-50px"}}, 400); }, function(){ $(this).children('img').stop().animate({width:"100px",height:"100px",left:"0",top:"0"}, 400); }); });
Анатолий сообщил:

Ноябрь 25th, 2009 22:32

Всё равно фигня по этому коду выходит :). Почему в первом варианте картинка увеличивается вниз и вправо? И зафиксирован левый верхний угол картинки. Какими параметрами это определяется? Как сделать что бы зафиксирован был правый верхний край картинки и увеличивалась она влево и вниз? Можно сделать так, что бы зафиксирован был центр картинки, а увеличивалась она от центра одинаково во все стороны?
WebMast сообщил:

Ноябрь 26th, 2009 10:09

Вот смотри: bitby.net/wp-demo/web/img...or-jquery/3.html Насчет твоих вопросов, отвечаю на все по порядку: 1. Картинка закреплена на странице сверху и слева. Значит ей болше некуда изменять свои размеры, кроме как вниз вправо. Так ведут себя все стандартные браузеры. Чтобы изменить это, нужно ковыряться с отрицательными отступами... 2. Здесь нужно делать как всегда, только делать отрицательный оступ слева. 3. Можно... В каждую сторону по отрицательному отступу.
Дмитрий сообщил:

Декабрь 25th, 2009 19:44

Промучился целый день... неужели нельзя готовый ( не сырой) материал делать... Вроде работает, а в Internet Explorer всё равно картинки прыгают... Где я ошибся ? применил здесь aquanara1.ru/panorama170.html и можно как то получить нормальный скрипт типа такого : highslide.com/ref/hs.Expa...otype.onMouseOut очень красиво там работает , но совершенно не понятно как...
WebMast сообщил:

Декабрь 27th, 2009 16:30

Берешь эффект с highslide.com и делаешь свой, полностью анологичным образом.
Дмитрий сообщил:

Декабрь 28th, 2009 17:27

Спасибо , я уже разобрался, сделал по принцыпу highslide.com ... там всё чётко работает... (только они там грозятся , что она лицензионная...) Надеюсь сильно ругаца не будут ... Так, что, если кто чего не понял — спрашивайте...
Xpyctik сообщил:

Январь 30th, 2010 13:25

Здравствуйте, мне очень подходит вариант реализации с css но они все со следующей строки начинаются, как их выставить в ряд. Я пооолный профан в этом деле, сильно не ругайтесь:)
WebMast сообщил:

Январь 30th, 2010 16:04

Нужно грамотно прописать стили для этой картинки... Все зависит от внешних объектов на странице.
Александр сообщил:

Февраль 2nd, 2010 23:26

а можно ли что бы картинка которая увеличеваеться была не прозрачной? а бьюсь, ни как не выходит. Подскажите варианты, использовал первый вариант
WebMast сообщил:

Февраль 3rd, 2010 17:58

Александр, у меня во всех примерах используются «не прозрачные» картинки.
Гость сообщил:

Февраль 12th, 2010 11:04

а можно сделать так чтоб область срабатывания равнялась только маленькой картинке, а не большой? Типа если нужно несколько маленьких превьюх в ряд и чтоб на каждую срабатывал.
WebMast сообщил:

Февраль 12th, 2010 11:25

Можно... Все зависит от вашего кода. Если можно задать ссылкам определенный идентификатор, то сделать намного проще. Иначе нужны другие варианты.
Серж сообщил:

Февраль 18th, 2010 0:04

а можно сюда как-то гиперссылку добавить, чтобы при увеличении на ней можно было кликнуть?
WebMast сообщил:

Февраль 19th, 2010 9:06

Можно, замените href у ссылки, на свой путь к сайту: <a class="st" href="javascript:" rel="nofollow">
AlexM сообщил:

Февраль 20th, 2010 17:44

у меня возникла проблема с выходом в интернет и вот что я понял: src="http://bitby.net/wp-demo/files/jquery.js не работает без доступа к интернет. а как это можно обойти? Спасибо!
WebMast сообщил:

Февраль 20th, 2010 18:23

AlexM, откройте в своем браузере страницу: bitby.net/wp-demo/files/jquery.js. Затем нажмите сохранить как и выберите путь для сохранения. Фреймворк остался на вашем компьютере и вам стоит лишь прописать правильный путь к нему.
AlexM сообщил:

Февраль 20th, 2010 21:02

А не могли бы Вы мне подсказать, как именно прикрепить файл сценария jScript? С CSS все понятно, а jScript что то не хочет.
WebMast сообщил:

Февраль 20th, 2010 21:16

Смотрите, сохраняете файл. Далее на своей странице прописываете в исходном коде, между <head> и </head> такую строчку: <script src="путь к файлу (например js/jquery.js)" type="text/javascript"></script>
AlexM сообщил:

Февраль 20th, 2010 21:19

Спасибо большое, теперь все ОК!
артём сообщил:

Февраль 23rd, 2010 18:51

куда этот долбанный jquery вставлять,ни фига не понятно,в джумле вообще ни фига не работает.
WebMast сообщил:

Февраль 23rd, 2010 18:58

артём, можно подробнее? Что именно не работает?
артём сообщил:

Февраль 23rd, 2010 19:03

не увеличивается фотка,куда jquery скрипт надо засунуть в джумле????и вообще в джумле работает этот скрипт???Css понятно в редактирование css а jquery куда в редактирование html? если да то не получается,надо может какие-то пути ещё прописать в джумле,уже 2 часа долблюсь,все варианты перепробовал,навожу на картинку на локалке,подпись внизу javascript и ни фига не увеличивается,попробовал первый вариант,всё получилось,но мне не понравилось,хочу плавное увеличение поскажите,как можно поподробней пожалуйста!!!!!!
AlexM сообщил:

Февраль 23rd, 2010 20:03

Добрый вечер, у меня есть такой вопрос: помоги разобраться с .Hta и если можно посоветуйте литературу. Базовые знания у меня имеются, но все же хочется знать больше! Спасибо!
артём сообщил:

Февраль 23rd, 2010 20:43

ничего не получается ну подскажите!!
AlexM сообщил:

Февраль 23rd, 2010 21:03

Привет, Артем. Если я правильно понял, то для Html выглядит все это дело вот так: страница 1
AlexM сообщил:

Февраль 23rd, 2010 21:05

после первого Head и после meta
WebMast сообщил:

Февраль 23rd, 2010 21:19

артём, я не знаю как редактируется в жумле, но нужно найти где-то редактирование шапки. Далее ищи строчку </head>. И вместо нее вставляй: <script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head> Далее ищи строку <body>, и вместо нее вставляй: <body> <script> $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); }); }); </script> Далее в нужное место в коде вставь html: <a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a>
WebMast сообщил:

Февраль 23rd, 2010 21:21

AlexM, возможно в сообщении «Февраль 23rd, 2010 20:03» ты хотел вставить код? Для вставки кода используй тег code.
артём сообщил:

Февраль 24th, 2010 11:36

А вот здесь какой у меня путь примерно до jquery.js,где у меня должен jquery лежать в джумле в какой папке.
WebMast сообщил:

Февраль 24th, 2010 12:25

При включенном интернете можете использовать наш путь (bitby.net/wp-demo/files/jquery.js), если хотите использовать локально. то: Заливаете фреймворк (jquery) например в корневую папку сайта (там где index.php), далее редактируете index.php. Ищите </head> и вместо него вставляете: <script src="http://bitby.net/wp-demo/files/jquery.js" type="text/javascript"></script> </head>
артём сообщил:

Февраль 24th, 2010 12:41

а где в джумле корневая папка сайта?
артём сообщил:

Февраль 24th, 2010 18:08

ваше изображение получилось через джумлу поместить а какк своё -то поставить,какой путь-то надо прописать?????????????
WebMast сообщил:

Февраль 24th, 2010 18:10

артём, напиши мне по icq, пожалуйста.
артём сообщил:

Февраль 24th, 2010 18:11

не блина получилось,только моё изо как-то сжато,гденужные минуса прописать?
артём сообщил:

Февраль 24th, 2010 18:33

а ещё скажите пожалуйста,если после того,как перенесу свой сайт с локального на удаленный сервер,будут работать изображения,если я заливал фреймворк,то есть делал всё что для локального требуется?
WebMast сообщил:

Февраль 24th, 2010 18:50

Меняешь в css ширину и высоту: a.st .img{width:100px;height:124px;} a.st .img img{width:100px;height:124px;} a.st:hover .img{width:100px;height:124px;overflow:visible;visibility:hidden;} a.st:hover .img img{visibility:visible;position:absolute;z-index:150;} Все значения width — меняешь на начальную ширину своей картинки. Все значения height — меняешь на начальную высоту своей картинки. Далее скрипт: $(function(){ $('.img').hover(function(){ $(this).children('img').stop().animate({width:"250px",height:"274px"}, 400); // Значения ширины и высоту, когда навели курсор. }, function(){ $(this).children('img').stop().animate({width:"100px",height:"124px"}, 400); // Начальные значения ширины и высоты. }); });
артём сообщил:

Февраль 24th, 2010 19:10

да здесь я понял спасибо,а вот у вас на примере изображение при увеличении всё равно красиво смотрится,а у меня как-то смазываться начинает??и ещё все картинки которые рядом,начинают отадвигаться от этой картинки,а у вас допусти текст3 (на примере)перекрывает и текст1 и 2 не двигаются по сторонам?и ещё у меня картинка встала слева,но при наведении курсора в правом углу шаблона,она подлавливается слева и начинает увеличиваться,то есть на всю строку растянута,но сама находится слева?? вот такие три проблемы мне не решить!!
Женя сообщил:

Февраль 24th, 2010 19:41

Реально ли это вместе с mootools использовать? У меня на сайте шаблон с mootools — его не выкинешь... Или может можно как-то использовать библиотеку mootools вместо jQuery? Не могу нарыть такого на mootools (((
WebMast сообщил:

Февраль 25th, 2010 13:46

артём: 1. Насчет смазывания, скорее всего это зависит от качество картинки. 2. Задай родительскому блоку, например в нашем примере это .img, свойство position со значением absolute. 3. Пример можно посмотреть? Женя, конечно реально. Я с mootools не знаком, но даже если на нем нельзя, то использовать два фреймворка можно. Одна лишь проблема при этом, и jQuery и mootools используют для селекторов знак «$». Для того, чтобы изменить во всех кодах jQuery знак «$» на свой, используйте .noconflict(): var $j = jQuery.noConflict(); В дальнейшем вам нужно будет пользоваться в jQuery скриптах не «$», а «$j». Например $j('#id').css({display:'none'});.
артём сообщил:

Февраль 25th, 2010 18:41

что за родительский блок,где он именно в джумле??? в css может просто прописать это значение для img например или как нибудь так можно??
WebMast сообщил:

Февраль 25th, 2010 18:56

Родительский блок — это блок, внутри которого расположена картинка. В жумле, в прочем как и везде, ты вставляешь код: <a class="st" href="javascript:" rel="nofollow"> <div class="img"><img src="http://bitby.net/wp-content/uploads/2008/12/0000050.jpg" alt="" title="" /></div> </a> Как видно, что перед img есть блок с классом img. Этот блок и является родительским. Попробуй ему задать абсолютное позиционирование (position:absolute).
артём сообщил:

Февраль 25th, 2010 18:57

задать в css?
артём сообщил:

Февраль 25th, 2010 19:05

не непомогает всё равно все изо которым я задал эту анимацию катаются по сторонам,а которым не задал класс стоят нормально!!!
WebMast сообщил:

Февраль 25th, 2010 19:08

артём, хотелось бы посмотреть. Есть возможность увидеть в интернете? Кстати, напиши мне по icq: 407{9}{9}4950.
AlexM сообщил:

Март 6th, 2010 22:08

Доброго дня суток. Мне не дает покоя один недочет, возникающий при использовании jQuery: если делать так, как Вы описывали, то получается, что если картинка находится слева, то по все длине будет показана в браузерах ссылка, при нажатии на которую переходим по ссылке. как сделать, чтобы ссылки высвечивались и были функциональны только при наведении на картинку?
WebMast сообщил:

Март 9th, 2010 20:29

AlexM, вам нужна реализация: 1. Показывается маленькая картинка на странице. 2. При наведении курсора на эту картинку, она увеличивалась и поверх картинки появлялась ссылка. Если да, то лучше пользоваться совсем другим кодом.

Блог Интернет Технологий

Зарабатывай

Гомель

Раскрути свой сайт

Купи ссылку