• Регистрация
  • Вход
MENU
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Форум » Обо всём » Собираем скрипты » При наведении курсора (Плавное увеличении картинки)
При наведении курсора
artnovДата: Четверг, 06.11.2014, 19:07 | Сообщение # 1
Начальник сайта
Группа: Администраторы
Сообщений: 149
Награды: 0
Репутация: 0
Статус: Offline
Плавное увеличении картинки при наведении курсора, с использованием CSS и jQuery

Пример на странице

 
Код
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

<style type="text/css">
.st2 {width:200px;height:150px;}
.st2  img{width:200px;height:150px;position:absolute;z-index:150;}
.st2:hover {width:200px;height:150px;overflow:visible;}
.st2:hover img{visibility:visible;position:absolute;z-index:150;}
</style>

<script type="text/javascript">
      $(function(){
       $('.img2').hover(function(){
         $(this).children('img').stop().animate({width:"600px",height:"400px"}, 400);
       }, function(){ $(this).children('img').stop().animate({width:"200px",height:"150px"}, 400); };);
     };);

</script>
<div class="st2"><div class="img2"><img src="http://www.novickiy.ru/_ph/8/433982343.jpg?1403693595" width="200" height="150"/></div>


Взято с blogodel.com/2012/10/uvelichenii-kartinki-pri-navedenii.html
 


 Ссылка на публикацию
 
html-cсылка на публикацию
BB-cсылка на публикацию


Artnov
 
Форум » Обо всём » Собираем скрипты » При наведении курсора (Плавное увеличении картинки)
Страница 1 из 11
Поиск: