Главная » Файлы » Прочие скрипты » jQuery
Плавное увеличение объектов при наведении на jQuery
22.06.14, 20:11:40

Скачать файл



Итак, для этого нам понадобятся две картинки, маленького и большого размера. Это нужно, чтобы при увеличении маленькая картинка заменялась большой, т.к. браузеры растянутые картинки смазывают/сглаживают и она становится не четкой, а ие6 еще хуже, растягивает ее без сглаживания, и на картинке появляются квадратики и прочий мусор.

Установка:

Для начала в head вставьте следующий код:
Код
<style type="text/css">  
  body{padding:10px 100px;}  
  .zoom{  
  position:relative;  
  cursor:pointer;  
  left:0;  
  top:0;  
  }  
  </style>  
  <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>


Внимательно всмотритесь в код (Как и где пропичываются ссылки на изображения)

Сами объекты увеличения прописываются следующим образом:
Код
<img src="pic1.png" class="zoom" alt="" />


Всё smile В прикреплённом архиве лежит рабочий пример
Категория: jQuery | Добавил: Apocalypse | Теги: Плавное, объектов, при, на, увеличение, JQuery, наведении
Просмотров: 432 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: